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怀 志 入 编著 从 最 基础 的 搭建 开发 环境 讲 起 ， 至 
各 种 移动 Web 开 发 技术 解密 
LARES 涉及 当今 Web 开 发 领域 中 的 最 新 
的 、 引 领 未 来 的 技术 
ERR 理论 原理 一 使 用 流程 一 实例 演示 ， 
每 个 知识 点 均 用 实例 进行 演示 
涵盖 HTML 5、jQuery Mobile、 
Phone Gap 等 移动 Web 开 发 核心 技术 
EX) 超 长 时 间 视 频 讲 解 ， 共 12 小 时 ， 帮 
助 读者 快速 掌握 核心 技术 
PEESI 充分 展现 每 个 知识 点 的 使 用 精髓 ， 
注意 事项 和 使 用 技巧 贯穿 全 书 


[DVD-ROM| 
。 赠送 8 小 时 知识 点 讲解 视频 
。 赠送 4 小 时 实例 讲解 视频 
。 提供 相关 实例 的 源 文件 
。 提供 本 书 PPT 电 子 课件 
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本 书 内 容 新 颖 、 知 识 全面 、 讲 解 详细 ， 分 为 4 篇 ， 共 24 章 。 其 中 ， 第 1 一 3 章 是 基础 篇 ， 包 括 Android 技术 概述 、 
Android 网 络 开发 技术 基础 、 创 建 移动 Web 的 方法 ; 第 4 一 13 章 是 HTML 5 篇 ,讲解 了 在 Android 中 使 用 HTML 5 技术 
设计 移动 Web 网 页 的 基本 知识 ， 包 括 HTML 5 架构 、 基 本 元 素 、 表 单元 素 、 音 频 处 理 、 视 频 处 理 、 绘 图 、 数 据 存储 、 
常用 API 的 基本 知识 和 具体 用 法 ; 第 14 一 22 章 是 jQuery Mobile 篇 ， 详 细 讲 解 了 在 Android 中 使 用 jQuery Mobile 框架 
开发 移动 Web 网 页 的 基本 知识 ， 包 括 jQuery Mobile 导航 、 按 钮 、 表 单 、 列 表 、 内 容 格式 化 、 主 题 化 设计 和 常用 API 的 
基本 知识 和 各 个 知识 点 的 具体 用 法 ; 第 23 一 24 章 是 综合 实战 篇 ， 本 篇 结合 前 面 3 篇 内 容 ， 讲 解 了 在 PhoneGap 框架 中 
开发 大 型 综合 移动 Web 系统 的 具体 流程 和 方法 。 全 书 采用 理论 加 实践 的 教学 方法 ， 每 个 实例 先 提出 制作 思路 及 包含 的 
知识 点 ， 然 后 力求 用 最 通俗 的 语言 将 高 深 的 知识 阐述 出 来 。 通 过 本 书 的 内 容 ， 读 者 可 以 掌握 在 Android 系统 中 开发 移动 
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Web 的 基本 知识 。 


本 书 适合 Android 开发 者 、 网 页 设计 师 和 Web 开发 程序 员 、 研 发 人 员 及 在 职 程序 员 阅 读 ， 也 可 作为 相关 培训 学 校 
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随 着 移动 手机 设备 的 不 断 升 级 , Android, iOS, Windows Phone 等 智能 系统 的 市 场 占有 率 越 来 越 高 ， 
智能 手机 已 经 步 入 了 飞速 发 展 的 黄金 时 期 。 正 是 在 强烈 的 市 场 需求 下 ， 我 们 精心 编写 了 本 书 ， 以 帮助 
广大 读者 快速 步 入 到 移动 Web 开发 的 大 军 中 去 。 


背景 介绍 


据 《 纽 约 时 报 》 网 络 版 报道 ,市 场 研究 公司 Forrester 称 ，2016 年 全 球 智能 手机 用 户 数量 将 达到 10 
亿 人 ， 其 中 许多 人 将 使 用 移动 设备 办 公 。 因 此 ， 企 业 需 要 着 力 思索 如 何 用 手机 产品 吸引 客户 。 据 国外 
媒体 报道 ， 爱 立信 近日 发 布 的 一 份 报告 称 ， 到 2017 年 ， 移 动 设 备 的 数量 将 从 2012 年 第 一 季度 的 62 亿 
增长 到 90 亿 。 

从 移动 电话 的 产生 ， 到 当前 移动 互联 应 用 的 风 生 水 起 ， 我 们 步 入 到 了 任何 人 都 有 机 会 获得 大 量 信 
息 资源 的 移动 互联 网 时 代 。 尽 管 移动 计算 技术 已 扮演 了 如 此 重要 的 角色 ， 但 它 仍 处 于 发 展 初 期 。 对 于 
需要 吸引 不 同 群体 用 户 、 满 足 不 同业 务 需求 的 应 用 而 言 ， 如 何 使 用 一 个 实用 、 价 格 合理 且 可 支持 大 量 
应 用 的 方式 来 实现 我 们 的 移动 愿景 ? 在 很 多 情况 下 看 来 ， 答 案 是 使 用 Web 技术 。 从 Apple 的 iOS 和 
Google 的 Android 可 以 看 出 ， 未 来 的 移动 计算 领域 注定 将 以 更 加 开放 的 形态 发 展 。 基 于 开放 、 免 费 并 
且 互 操作 性 很 强 的 平台 ， 开 发 方式 将 在 移动 应 用 的 开发 过 程 中 扮演 关键 角色 。 


内 容 介 绍 


本 书 是 国内 著名 的 一 线 Web 设计 师 和 移动 Web 专家 的 力作 ， 是 国内 第 一 本 全 面 介绍 HTML 5、 
jQuery Mobile 和 PhoneGap 的 专业 书籍 .全书 分 为 4 篇 , 共 24 章 , 其 中 第 1 一 3 章 是 基础 篇 ,包括 Android 
技术 概述 、Android 网 络 开发 技术 基础 、 创 建 移动 Web 的 方法 ; 第 4 一 13 章 是 HTML 5 篇 ， 讲 解 了 在 
Android 中 使 用 HTML 5 技术 设计 移动 Web 网 页 的 基本 知识 ， 包 括 HTML 5 架构 、 基 本 元 素 、 表 单元 
素 、 音 频 处 理 、 视 频 处 理 、 绘 图 、 数 据 存储 、 常 用 API 的 基本 知识 和 具体 用 法 ; 第 14 一 22 章 是 jQuery 
Mobile 篇 ,详细 讲解 了 在 Android 中 使 用 jQuery Mobile 框架 开发 移动 Web 网 页 的 基本 知识 ,包括 jQuery 
Mobile 导航 、 按 钮 、 表 单 、 列 表 、 内 容 格式 化 、 主 题 化 设计 和 常用 API 的 基本 知识 和 各 个 知识 点 的 具 
体 用 法 ; 第 23 一 24 章 是 综合 实战 篇 ， 本 篇 结合 前 面 3 篇 内 容 ， 讲 解 了 在 PhoneGap 框架 中 开发 大 型 综 
合 移动 Web 系统 的 具体 流程 和 方法 。 全 书 理论 结合 实践 ， 通 过 大 量 的 实例 剖析 了 Java Web 开发 技术 
的 基本 知识 。 内 容 和 实例 都 具有 极 强 的 代表 性 ， 适 合 初学 者 的 入 门 学 习 ， 也 可 作为 有 一 定 基 础 的 读者 
的 参考 书 。 


本 书 内 容 


1. 配 有 多 媒体 语音 教学 视频 ， 学 习 效果 好 
笔者 专门 录制 了 大 量 的 配套 多 媒体 语音 教学 视频 ， 以 便 让 读者 能 更 加 轻松 、 直 观 地 学 习 本 书 内 容 ， 


提高 学 习 效率 。 这 些 视 频 与 本 书 源 代码 一 起 收录 于 配 书 光 盘 中 。 

2. 结构 合理 ， 内 容 全 面 

本 书 从 用 户 的 实际 需要 出 发 ， 科 学 安排 知识 结构 ， 内 容 由 浅 入 深 ， 叙 述 清楚 ， 具 有 很 强 的 知识 性 
和 实用 性 。 全 书 内 容 安排 合理 ， 将 HTML 5. jQuery Mobile 和 PhoneGap 一 网 打 尽 ， 这 是 移动 Web JT 
发 的 核心 技术 。 

3. 易学 易 懂 ， 初 学 者 容易 上 手 

本 书 条 理 清晰 ， 语 言 简 洁 ， 可 帮助 读者 快速 掌握 每 个 知识 点 ; 每 个 部 分 既 相互 联系 又 自 成 体系 ， 读 
者 既 可 以 按照 本 书 编排 的 章节 顺序 进行 学 习 ， 也 可 以 根据 自己 的 需求 对 某 一 章节 进行 有 针对 性 的 学 习 。 

4. 由 浅 入 深 ， 内 容 循序 渐进 

本 书 从 搭建 Android 开发 环境 和 HTML 5 的 基本 语法 知识 入 手 ， 逐 步 介绍 了 jQuery Mobile 框架 和 
PhoneGap 框架 的 核心 知识 ,使 读者 在 没有 编程 基础 的 情况 下 ， 也 能 很 快 地 掌握 移动 Web 开发 的 技术 精髓 。 

5. 实例 典型 ， 实 用 性 强 

本 书 彻底 据 弃 枯燥 的 理论 讲解 和 简单 的 操作 说 明 ， 注 重 实用 性 和 可 操作 性 ， 详 细 讲 解 了 各 个 部 分 
的 源码 知识 ， 使 读者 掌握 相关 操作 技能 的 同时 ， 还 能 学 习 到 相应 的 基础 知识 。 


本 书 读者 对 象 


初学 编程 的 自学 者 。 

编程 爱好 者 。 

大 中 专 院 校 的 老师 和 学 生 。 
相关 培训 机 构 的 老师 和 学 员 。 
进行 毕业 设计 的 学 生 。 

网 页 设计 师 。 

Web 程序 员 。 

参加 实习 的 初级 程序 员 。 
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本 书 主要 由 怀 志 和 编写 完成 ， 同 时 参与 编写 的 人 员 还 有 周秀 、 付 松柏 、 邓 才 兵 、 钟 世 礼 、 谭 贞 军 、 
罗 红 仙 、 张 加 春 、 王 东 华 、 王 振 丽 、 熊 斌 、 王 教 明 、 万 春 潮 、 郭 慧玲 、 侯 恩 静 、 程 娟 、 王 文忠 、 陈 强 、 
何 子夜 、 李 天 祥 、 周 锐 、 朱 桂 英 。 本 书 在 编写 过 程 中 得 到 了 清华 大 学 出 版 社工 作 人 员 的 大 力 支持 ， 在 
此 一 并 表示 感谢 。 

因为 本 书 篇 幅 有 限 ， 所 以 实例 中 的 代码 无 法 在 书 中 一 一 列 出 ， 给 广大 读者 带 来 了 不 便 ， 敬 请 谅解 。 
请 读者 在 阅读 本 书 时 ， 参 考 本 书 附 带 光盘 中 的 源码 。 另 外 ， 由 于 时 间 仓 促 和 水 平 有 限 ， 书 中 难免 有 疏 
漏 和 不 妥 之 处 ， 奶 请 读者 提出 意见 或 建议 ， 以 便 修 订 并 使 之 更 至 完善 。 为 了 更 好 地 为 读者 服务 ， 我 们 
专门 提供 了 技术 支持 网 站 www.chubanbook.com 和 QQ 邮箱 150649826@qq.com， 无 论 是 书 中 的 疑问 ， 
还 是 学 习 过 程 中 的 疑惑 ， 本 团队 将 一 一 为 大 家 解答 。 
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第 1 章 Android 技术 概述 


Android 是 一 种 智能 手机 系统 ， 建 立 在 Linux 系统 基础 之 上 ， 能 够 迅速 建立 手机 软件 的 解决 方案 。 
Android 自 2007 年 诞生 之 日 起 便 迅速 成 为 一 个 新 兴 的 热点 , 并 在 2011 年 开始 一 直 在 智能 手机 市 场 占有 
率 中 位 居 第 一 。 本 章 将 简单 介绍 Android 的 发 展 历程 和 背景 ， 让 读者 了 解 Android 的 发 展 之 路 ， 真切 体 
会 Android 如 此 火爆 的 原因 。 


1.1 来 到 智能 手机 世界 


CA 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 1 章 \ 来 到 智能 手机 世界 .avi 

在 Android 系统 诞生 之 前 ， 智 能 手机 便 受到 了 广大 消费 者 的 青睐 。 各 大 手机 厂商 在 利益 的 驱动 之 
下 ,纷纷 建立 了 各 种 智能 手机 操作 系统 ， 并 且 大 肆 招 兵 买 马 来 抢 夺 市 场 份额 。Android 系统 就 是 在 这 个 
风起云涌 的 历史 背景 下 诞生 的 。 


1.1.1 何谓 智能 手机 


现在 的 智能 手机 就 是 一 个 移动 计算 机 ， 能 够 完成 大 多 数 计算 机 可 以 实现 的 功能 。 究 竟 怎 么 样 才能 
算是 智能 手机 呢 ? 其 实 并 没有 标准 ， 国 际 某 权威 数据 中 心 的 统计 机 构 做 了 一 份 市 场 调查 ， 根 据 调查 结 
果 得 出 了 智能 手机 的 条 件 。 要 想 成 为 智能 手机 ， 就 必须 具备 以 下 5 个 标准 。 

回 “操作 系统 必须 支持 新 应 用 的 安装 。 

回 “高 速度 处 理 芯 片 。 

ED 支持 播放 式 的 手机 电视 。 

回 ”大 存储 芯片 和 存储 扩展 能 力 。 

E) 支持 GPS 导航 。 

上 述 条 件 虽 然 声称 是 世上 最 标准 的 ， 但 毕竟 不 是 官方 组 织 ， 为 此 手机 界 的 官方 组 织 “ 手 机 联盟 ” 
出 面 制定 了 一 个 标准 ， 总 结 出 如 下 几 条 智能 手机 的 特点 。 

回 具备 普通 手机 的 全 部 功能 ， 如 可 以 进行 正常 的 通话 和 发 短信 等 手机 应 用 。 

回 是 一 个 开放 性 的 操作 系统 ， 在 系统 平台 上 可 以 安装 更 多 的 应 用 程序 ， 从 而 实现 功能 的 无 限 
扩充 。 
具备 上 网 功能 。 
具备 PDA 功能 ， 实 现 个 人 信息 管理 、 日 程 记事 、 任 务 安排 、 多 媒体 应 用 、 浏 览 网 页 。 
可 以 根据 个 人 需要 扩展 机 器 的 功能 。 
扩展 性 能 强 ， 并 且 可 以 支持 很 多 第 三 方 软件 。 


ARAARA 


1.1.2 ”当前 主流 的 智能 手机 系统 


当今 市 面 中 有 很 多 智能 手机 系统 ， 形 成 了 百家争鸣 的 局 面 。 但 是 最 受 大 家 欢迎 的 当 属 塞 班 、 安 卓 、 
苹果 和 黑莓 。 


1. 昨日 皇 者 一 一 Symbian (END 


Symbian 作为 昔日 智能 手机 的 王者 , 在 2005 一 2010 年 曾 一 度 风 行 , 很 多 人 都 使 用 诺基亚 的 Symbian 
手机 ，N70、N73、N78、N97， 诺 基 亚 N 系列 曾经 被 称 为 “N= 无 限 大 ”的 手机 。 对 硬件 的 要 求 低 、 操 
作 简单 、 省 电 、 软 件 资源 多 是 Symbian 系统 手机 的 重要 特点 。Symbian 系统 标志 如 图 1-1 所 示 。 

在 国内 软件 开发 市 场 内 ， 基 本 每 一 款 软件 都 会 有 对 应 的 塞 班 手机 版 本 。 而 塞 班 开发 之 初 的 目标 是 
要 保证 在 较 低 资 源 的 设备 上 长 时 间 稳 定 可 靠 地 运行 ， 这 导致 了 塞 班 的 应 用 程序 开发 有 着 较为 陡峭 的 学 
习 曲 线 ， 开 发 成 本 较 高 。 但 是 程序 的 运行 效率 很 高 。 例 如 5800 的 128MB 的 RAM， 后 台 可 以 同时 运行 
十 几 个 程序 而 操作 流畅 〈 多 任务 功能 特别 强大 ) ， 即 使 几 天 不 关机 ， 其 剩余 内 存 也 能 够 保持 稳定 。 

在 Android iOS 的 围攻 之 下 ,诺基亚 推出 了 塞 班 3 系统 ,甚至 依然 为 其 更 新 (Symbian Anna, Symbian 
Belle) ， 从 外 在 的 用 户 界面 到 内 在 的 功能 特性 都 有 了 显著 提升 ， 如 可 自由 定制 的 全 新 窗 体 部 件 、 更 多 
主屏 、 全 新 下 拉 式 菜单 等 。 

由 于 对 新 兴 的 社交 网 络 和 Web 2.0 内 容 支 持 欠 佳 ， 塞 班 占 智能 手机 的 市 场 份额 日 益 萎缩 。2010 年 
末 ， 其 市 场 占有 量 已 被 Android 超过 。 自 2009 年 底 开 始 ， 包 括 摩托 罗拉 、 三 星 电子 、LG、 索 尼 爱 立信 
等 各 大 厂商 纷纷 宣布 终止 塞 班 平台 的 研发 ， 转 而 投入 Android 领域 。2011 年 初 ， 诺 基 亚 宣布 将 与 微软 
成 立 战略 联盟 ， 推 出 基于 Windows Phone 的 智能 手机 ， 从 而 在 事实 上 放弃 了 经 营 多 年 的 塞 班 ， 塞 班 退 
市 已 成 定局 。 


2. 当今 潮流 一 一 Android 〈 安 卓 ) 


Android 一 词 最 早出 现 于 法 国 作家 利 尔 亚当 CAuguste Villiers de l'Isle-Adam) 在 1886 年 发 表 的 科 
约 小 说 《未 来 夏娃 》 (L'éve future). 中 。 他 将 外 表 像 人 的 机 器 起 名 为 Android. 

从 2008 年 HTC 和 Google 联手 推出 第 一 台 Android 手机 G1 开始 ， 在 2011 年 第 一 季度 ，Android 
在 全 球 的 市 场 份额 首次 超过 塞 班 系统 ， 跃 居 全 球 第 一 。2011 年 11 月 数据 显示 ，Android 占据 全 球 智能 
手机 操作 系统 市 场 52.5% 的 份额 , 中 国 市 场 占有 率 为 58%。 如 今 Android 已 经 成 为 市 面 上 主流 的 智能 手 
机 操作 系统 ， 随 处 都 可 以 见 到 绿色 机 器 人 的 身影 〈 见 图 1-2) 。 


symbian 
OS Qqn23olD 


1-1 Symbian 系统 标志 1-2 Android 系统 标志 


Android 机 型 数量 庞大 ， 简 单 易 用 ， 相 当 自 由 的 系统 能 让 厂商 和 客户 轻松 地 定制 各 样 的 ROM、 桌 
面部 件 和 主题 风格 。 简 单 而 华丽 的 界面 得 到 广大 客户 的 认可 ， 对 手机 进行 刷机 也 是 不 少 Android 用 户 
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所 津津 乐 道 的 事情 。 
可 惜 Android 版 本 数量 较 多， 市面 上 同时 存在 着 1.6、2.0、2.1、2.2、2.3 等 各 种 版 本 的 Android 系 
统 手 机 ， 应 用 软件 对 各 版 本 系统 的 兼容 性 对 程序 开发 人 员 是 一 种 不 小 的 挑战 。 同 时 ， 由 于 开发 门槛 低 ， 
导致 应 用 数量 虽然 很 多 ， 但 是 应 用 质量 参差 不 齐 ， 甚 至 出 现 不 少 恶意 软件 ， 导 致 一 些 用 户 受 到 损失 。 
另外 ，Android 没有 对 各 厂商 在 硬件 上 进行 限制 ， 导 致 一 些 用 户 在 低 端 机 型 上 体验 不 佳 。 另 一 方面 ， 因 
为 Android 的 应 用 主要 使 用 Java 语言 开发 , 其 运行 效率 和 硬件 消耗 一 直 是 其 他 手机 用 户 所 诉 病 的 地 方 。 
目前 ，Android 已 经 更 新 到 4.2 版 本 。 


3. 高 贵 华丽 一 一 iOS GER) 


iOS 作为 苹果 移动 设备 iPhone 和 iPad 的 操作 系统 ， 在 App Store 
的 推动 之 下 ， 成 为 了 世界 上 引领 潮流 的 操作 系统 之 一 。 原 本 这 个 系统 g 
名 为 iPhone OS, É $] 2010 ^F. 6 H 7 H WWDC 大 会 上 宣布 改名 为 iOS。 
ios 的 用 户 界面 的 概念 基础 上 是 能 够 使 用 多 点 触 控 直接 操作 。 控制 方法 
包括 滑动 、 轻 触 开关 及 按键 。 与 系统 交互 包括 滑动 (Swiping) 、 轻 按 
(Tapping) 、 挤 压 (Pinching， 通 常用 于 缩小 ) 及 反 向 挤 压 〈Reverse 
Pinching or Unpinching， 通 常用 于 放大 ) 。 此 外 , 通过 其 自 带 的 加 速 器 ， 
可 以 令 其 旋转 设备 改变 y 轴 以 改变 屏幕 方向 ， 这 样 的 设计 令 iPhone 更 
便于 使 用 。iOS 系统 标志 如 图 1-3 所 示 。 


ios 经 历 了 以 下 发 展 阶段。 pem. 
El iPhoneOS L0: 内置 于 iPhone 一 代 手机 里 ， 借 助 iphone 流畅 M» 
的 触摸 屏幕 ，iPhone OS 给 用 户 带 来 了 极为 优秀 的 使 用 体验 ， 图 1.3 ios 系统 标志 


相 比 当时 地 手机 可 以 用 惊艳 来 形容 。 

回 iPhone OS2.0: 随 着 iPhone 3G 发 布 ，App Store 诞生 。App Store 为 第 三 方 软件 的 提供 者 提供 
了 一 个 方便 高 效 的 软件 销售 平台 ， 在 软件 开发 者 与 最 终 用 户 之 间架 起 了 一 座 沟 通 与 销售 的 桥 
梁 ， 从 而 极 大 地 丰富 了 iPhone 手机 的 功能 应 用 。 

回 iPhone OS 3.0: iPhone 3GS 开始 支持 复制 、 粘 贴 功能 。 

回 iOS 4: 在 iPhone4 推出 时 , 苹果 决定 将 原来 iPhone OS 系统 重新 定名 为 OS， 并 发 布 新 一 代 操 
作 系 统 iOS 4。 在 该 版 本 中 ， 开 始 正式 支持 多 任务 功能 ， 通 过 双击 HOME 键 实现 。 

El iOSS5: 加 入 了 Siri 语音 操作 助手 功能 ， 用 户 可 以 与 手机 实现 语言 上 的 人 机 交互 ， 该 功能 可 以 
实现 对 用 户 的 语音 识别 ， 完 成 一 些 较为 复杂 的 操作 ， 使 用 Siri 来 查询 天 气 、 进 行 导航 、 询 问 
时 间 、 设 定 闹 钟 、 查 询 股票 甚至 发 送 短信 等 功能 ， 方 便 了 用 户 的 使 用 。 

从 最 初 的 iPhone OS， 演 变 至 最 新 的 iOS 系统 ，iOS 成 为 了 苹果 新 的 移动 设备 操作 系统 ， 横 跨 iPod 
Touch、iPad、iPhone， 成 为 苹果 最 强大 的 操作 系统 。 甚 至 新 一 代 的 Mac OS X Lion 也 借鉴 了 iOS 系统 
的 一 些 设计 ， 可 以 说 iOS 是 苹果 的 又 一 个 成 功 的 操作 系统 ， 能 给 用 户 带 来 极 佳 的 使 用 体验 。 

优秀 的 系统 设计 以 及 严格 的 App Store, iOS 作为 应 用 数量 最 多 的 移动 设备 操作 系统 ， 加 上 强大 的 
硬件 支持 以 及 最 新 iOS 5 内 置 的 Siri 语音 助手 , 无 疑 使 得 用 户 体验 得 到 更 大 的 提升 , 让 用 户 感受 科技 带 
来 的 好 处 。 


4. 全 新 面貌 一 一 Windows Phone (Pér) 
早 在 2004 年 ， 微 软 就 开始 以 Photon 的 计划 代号 开始 研发 Windows Mobile 的 一 个 重要 版 本 更 新 ， 
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但 进度 缓慢 ， 最 后 整个 计划 都 被 取消 。 直 到 2008 年 ， 在 iOS 和 Android 的 冲击 之 下 ， 微 软 才 重新 组 织 
了 Windows Mobile 小 组 ， 并 继续 开发 一 个 新 的 行动 操作 系统 。 原 本 计划 它 的 正式 版 在 2009 ERIT, 
但 是 许多 方面 的 原因 使 得 微软 决定 先 用 Windows Mobile 6.5 来 过 渡 。 

Windows Phone 的 研发 一 跃 而 就 ， 造 成 的 后 果 之 一 就 是 ， 旧 有 的 Windows Mobile 应 用 程序 无 法 在 
Windows Phone 系统 中 正常 运行 。Windows Phone 开发 部 门 的 副 总 裁 泰 瑞 * 迈 尔 森 (Terry Myerson) 说 : 
“为 了 要 借 由 不 使 用 手写 笔 、 改 采 电 容 型 的 触 控 屏幕 ， 以 及 其 他 硬件 的 更 动 来 改善 Windows Phone 7 
的 使 用 经 验 ， 我 们 不 得 不 打破 Windows Mobile 6.5 的 应 用 程序 兼容 性 。” 

Windows Phone ( 见 图 1-4) ， 作 为 Windows Mobile 的 继承 者 ， 使 用 了 一 套 称 为 Metro 的 新 用 户 界 
面 ， 其 与 微软 已 经 中 止 的 Kin 相似 。 其 主 画 面 ， 亦 称 为 开始 画面 ， 是 由 许多 称 为 动态 砖 (Live Tiles) 
的 正方 或 长 方 图 形 元 素 所 组 成 的 。 动 态 砖 相当 于 可 以 连接 至 应 用 程序 、 功 能 以 及 其 他 独立 的 组 件 ( 如 
联络 人 、 网 页 或 媒体 项 目 ) 的 按钮 。 用 户 可 以 自行 增加 、 重 新 排列 或 删除 动态 砖 。 即 使 在 设备 锁定 的 
情况 下 ， 动 态 砖 也 能 够 依据 其 所 代表 的 内 容 随 时 更 新 。 例 如 ， 电 子 邮 件 的 动态 砖 上 面 会 显示 尚未 阅读 
的 邮件 有 几 封 ， 气象 的 动态 砖 也 能 够 显示 实时 更 新 的 天 气 内容 。 目 前 动态 砖 只 支持 纵向 的 版 面 ， 无 法 
在 横向 模式 中 显示 ， 如 图 1-5 所 示 。 


EJ windows Phone 
加 Windows Phone 
EJ Windows Phone 
EJ Windows Phone 
图 1-4 Windows Phone 系统 标志 1-5 Windows Phone 界面 


全 新 的 Windows 手机 把 网 络 、 个 人 计算 机 和 手机 的 优势 集 于 一 身 ， 让 人 们 可 以 随时 随地 享受 到 想 
要 的 体验 。 内 置 的 Office 办 公 套 件 和 Outlook 使 得 办 公 更 加 有 效 和 方便 。 在 应 用 方面 ， 虽 然 Windows 
Phone 提供 了 很 好 的 开发 工具 ， 而 且 微 软 为 了 规范 Windows Phone 7 的 用 户 体验 ， 对 开发 者 开发 应 用 进 
行 了 严格 的 约束 〈 开 发 者 必须 严格 遵循 这 些 开 发 约束 和 条 款 来 进行 应 用 开发 。 例 如 ， 开 发 者 不 能 开发 
涉及 手机 摄像 头 的 应 用 程序 ， 开 发 者 不 能 对 应 用 程序 的 界面 进行 私自 定制 ;涉及 系统 类 的 应 用 必须 使 
用 系统 提供 的 界面 来 运行 ; 开发 者 必须 通过 Zune 同步 功能 将 开发 好 的 应 用 程序 发 送 到 手机 上 ) ， 但 是 
目前 Windows Phone 的 应 用 数量 还 很 少 。 一 方面 ，Windows Phone 的 界面 独特 ， 可 定制 的 地 方 很 少 ， 
容易 造成 审美 疲劳 。 另 一 方面 ,在 最 新 版 本 Windows Phone 7.5 中 虽然 开始 支持 多 任务 处 理 , 但 是 最 多 
也 只 能 运行 5 个 程序 ， 多 任务 处 理 显 得 力不从心 。 

Windows Phone 起 步 早 ， 发 展 慢 。 虽 然 如 此 ， 目 前 Windows Phone 7 已 经 应 用 在 诺基亚 手机 上 ， 并 
作为 诺基亚 手机 的 主打 系统 被 推广 到 市 场 中 。 
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5. 高 端 商务 一 一 BlackBerry OS (E35) 


BlackBerry 系统 ， 即 黑莓 系统 ， 是 加 拿 大 Research In Motion 〈 简 称 RIM) 公司 推出 的 一 种 无 线 手 
持 邮 件 解决 终端 设备 的 操作 系统 ， 由 RIM 自主 开发 。 它 和 其 他 手机 终端 使 用 的 Symbian. Windows 
Mobile, iOS 等 操作 系统 有 所 不 同 ，BlackBerry 系 


` DD 
perei ERZE. BlackBerry 系统 的 标 a> BlackBerry. 


安装 有 BlackBerry 系统 的 黑莓 机 , 指 的 不 单单 
是 一 台 手 机 ， 而 是 由 RIM 公司 所 推出 ， 包 含 服务 
器 〈 邮 件 设 定 ) 、 软 件 〈 操 作 接 口 ) 以 及 终端 〈 手 机 ) 大 类 别 的 Push Mail 实时 电子 邮件 服务 。 

BlackBerry 移动 邮件 设备 基于 双向 寻 呼 技术 。 该 设备 与 RIM 公司 的 服务 器 相 结合 ， 依 赖 于 特定 的 
服务 器 软件 和 终端 ， 兼 容 现 有 的 无 线 数据 链 路 ， 实 现 了 遍及 北美 、 随 时 随地 收发 电子 邮件 的 梦想 。 这 
种 装置 并 不 以 奇妙 的 图 片 和 彩色 屏幕 夺 人 耳目 ,甚至 不 带 发 声 器 。“9，11” 事件 之 后 ， 由 于 BlackBerry 
及 时 传递 了 灾难 现场 的 信息 ， 而 在 美国 掀起 了 拥有 一 部 BlackBerry 终端 的 热潮 。 

黑莓 赖 以 成 功 的 最 重要 原则 一 一 针对 高 级 白领 和 企业 人 士 ， 提供 企业 移动 办 公 的 一 体 化 解决 方案 。 
企业 有 大 量 的 信息 需要 即时 处 理 ， 出 差 在 外 时 ， 也 需要 一 个 无 线 的 可 移动 办 公设 备 。 企 业 只 要 装 一 个 
移动 网 关 ， 一 个 软件 系统 ， 用 手机 的 平台 实现 无 颖 链接 ， 无 论 何 时 何 地 ， 员 工 都 可 以 用 手机 进行 办 公 。 
它 最 大 的 方便 之 处 是 提供 了 邮件 的 推送 功能 ， 即 由 邮件 服务 器 主动 将 收 到 的 邮件 推送 到 用 户 的 手持 设 
备 上 ， 而 不 需要 用 户 频 繁 地 连接 网 络 查看 是 否 有 新 邮件 。 

黑莓 系统 稳定 性 非常 优秀 ， 其 独特 定位 也 深 得 商务 人 士 所 青睐 。 可 是 也 因此 在 大 众 市 场 上 没有 明 
显 优势 ， 国 内 用 户 和 应 用 资源 也 较 少 。 
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在 当前 的 移动 设备 应 用 中 ， 上 网 功能 是 吸引 广大 用 户 的 一 大 热点 ， 并 大 有 逐渐 取代 传统 台式 机 的 
趋势 。 浏 览 网 页 、 网 络 游戏 、 手 机 QQ、 微 信 等 都 成 为 了 人 们 生活 中 密 不 可 少 的 一 部 分 。 本 节 将 简要 讲 
解 移动 手机 在 网 络 产业 的 巨大 优势 ， 为 读者 步 入 本 书后 面 知识 的 学 习 打 下 基础 。 


1.2.1 WAP 技术 介绍 


图 1-6 BlackBemy 系统 标志 


WAP (Wireless Application Protocol) 意 为 无 线 应 用 协议 ， 是 一 项 全 球 性 的 网 络 通信 协议 。WAP 
使 移动 Internet 有 了 一 个 通行 的 标准 ， 其 目标 是 将 Internet 的 丰富 信息 及 先进 的 业务 引入 到 移动 电话 等 
无 线 终端 之 中 。WAP 定义 了 一 个 可 通用 的 平台 , 把 目前 Intemet 网 上 HTML 语言 的 信息 转换 成 用 WML 

CWireless Markup Language) 描述 的 信息 , 显示 在 移动 电话 的 显示 屏 上 。WAP 只 要 求 移动 电话 和 WAP 
代理 服务 器 的 支持 ， 而 不 要 求 现 有 的 移动 通信 网 络 协议 做 任何 的 改动 ， 因 而 可 以 广泛 地 应 用 于 GSM、 
CDMA, TDMA, 3G 等 多 种 网 络 。 

浏览 用 户 可 以 借助 无 线 手持 设备 通过 WAP 获取 信息 ， 这 些 设备 可 以 是 掌上 电脑 、 手 机 、 呼 机 、 双 

向 广播 、 智 能 电话 等 。WAP 支持 绝 大 多 数 无 线 网 络 , 包括 GSM, CDMA, CDPD, PDC. PHS, TDMA, 
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FLEX, ReFLEX, iDen, TETEA, DECT, DataTAC 和 Mobitex。 所 有 操作 系统 都 支持 WAP， 其 中 专 
门 为 手持 设备 设计 的 有 PalmOS, EPOC, Windows CE, FLEXOS, OS/9 及 JavaOS。 当 手持 设备 安装 
微型 浏览 器 后 ， 可 以 借助 WAP 接 入 Intemet。 微 型 浏览 器 文件 很 小 ， 可 较 好 地 解决 手持 设备 内 存 小 和 
无 线 网 络 带 宽 不 足 的 限制。 虽然 WAP 能 支持 HTML 和 XML， 但 是 WML 才 是 专门 为 小 屏幕 和 无 键盘 
手持 设备 服务 的 语言 。WAP 也 支持 WMLScript。 这 种 脚本 语言 类 似 于 JavaScript， 但 对 内 存 和 CPU 的 
要 求 更 低 ， 因 为 它 基本 上 没有 其 他 脚本 语言 所 包 全 含 的 无 用 功能 。 


1.2.2 手机 上 网 的 商机 


根据 尼尔森 最 新 发 布 的 报告 显示 ， ti dd ina 经 领先 于 美国 ，38% 的 中 国手 
机 用 户 使 用 手机 上 网 ， 这 个 数据 在 美国 为 27%。 尽 管 接近 四 成 中 国手 机 用 户 通 过 手机 接 入 互联 网 ， 但 
peona lated hy 究 其 原因 可 能 在 于 , HE 3G 网 络 运行 只 有 几 
£F iPhone 和 Android 等 智能 手机 刚刚 普及 ; 手机 应 用 的 生态 系统 仍然 较为 澳 散 ， 社 交 网 络 平台 仍然 有 
待 发 展 等 。 然 而 ， 当 前 中 国 的 手机 普及 率 刚刚 过 半 ， 越 来 越 多 的 用 户 已 经 选择 无 线 连 接 以 致 固定 电话 的 
数量 不 断 下 降 ， 目 前 中 国 通过 计算 机 上 网 的 普及 率 仍然 低 于 美国 。 鉴 于 上 述 原 因 ， 预 计 未 来 消费 者 对 移 
动 设备 和 数据 的 需求 将 与 日 俱 增 ， 为 服务 供应 商 、 手 机 制造 商 、 零 售 商 和 内 容 供应 商 带 来 无 限 商 机 。 


1.2.3 ”移动 平台 应 用 开发 


移动 应 用 平台 是 一 个 充满 机 会 的 领域 ， 对 于 这 个 新 平台 而 言 ， 由 于 硬件 方案 的 快速 成 熟 ， 移 动 设 
备 已 经 很 难 像 过 去 那样 单纯 依靠 硬件 参数 来 吸引 用 户 ， te 因 
此 形形色色 的 应 用 将 成 为 移动 设备 新 的 命脉 ， 这 也 是 巨头 们 纷纷 拉拢 开发 者 的 根本 原因 。 

在 新 的 商业 模式 下 ， 众 多 应 用 商店 的 横 空 出 世 ， 极 大 地 方便 了 开发 人 员 投 身 到 移动 设备 的 开发 工 
作 中 ， 并 创造 应 得 的 财富 。 就 像 当 年 的 共享 软件 时 代 一 样 ， 一 个 个 新 财富 故事 正在 上 演 ， 不 少 先 行 的 
开发 者 已 经 在 这 些 新 平台 上 赚 到 了 第 一 桶 金 。 

模仿 App Store 的 成 功 模式 , Google 建立 的 Android Market 已 经 牢 牢 坐 稳 了 消费 移动 应 用 市 场 的 第 
二 把 交椅 。 与 苹果 的 App Store 不 同 ，Android Market 最 初 的 定位 便 意 在 打造 更 加 自由 的 移动 应 用 商店 ， 
所 以 不 设 任何 限制 ， 抛 弃 审核 制度 ， 简 化 软件 发 布 流程 ， 一 个 全 新 的 应 用 从 提交 到 发 布 快 者 仅 需 数 分 钟 ， 
结果 成 就 了 “菜市 场 ”的 美 名 。 宽 松 的 环境 ， 成 为 了 Android Market 对 开发 人 员 最 大 的 吸引 力 所 在 。 

就 开发 门槛 而 言 ，Android 平台 要 求 较 低 ， 即 使 独立 开发 人 员 也 能 轻松 满足 。 开 发 人 员 只 需要 一 次 
性 支付 25 美元 ， 使 用 普通 的 个 人 计算 机 便 可 以 搭建 起 完整 的 开发 环境 ， 而 Java 本 身 不 是 一 门 冷门 语 
言 ， 是 许多 程序 员 的 必修 或 专修 课 。 

但 是 Android 平台 的 开发 也 非 一 马 平川 。iOS 开发 者 面 对 的 是 两 种 屏幕 大 小 、 一 种 界面 和 操作 ， 
Android 开发 者 面 对 的 更 加 复杂 ， 大 大 小 小 的 屏幕 分 辩 率 ， 与 众 不 同 的 用 户 界面 ， 以 及 奇 奇怪 怪 的 按键 
设置 。 当 看 见 软件 介绍 后 面 “ 设 备 甲 不 能 运行 ”、“ 设 备 乙 运行 出 错 ” 等 诸如 此 类 的 评论 时 ， 想 必 哪 
个 程序 员 心里 都 不 会 好 受 。 无 奈 开 发 人 员 只 能 等 待 Google 发 布 新 版 本 ， 和 暂时 为 Android 严重 的 代码 分 
裂 问 题 埋单 。 

新 平台 上 的 竞争 刚刚 开始 ， 对 于 新 入 者 来 说 尤其 是 好 机 会 。 只 要 把 握 住 新 平台 的 特点 ， 赚 钱 并 非 
很 难 的 事情 。 究 竟 什 么 样 的 软件 会 赚钱 呢 ? 虽然 现在 数据 还 比较 少 ， 但 有 些 趋势 已 经 日 渐 明 显 。 笔 者 


认为 有 如 下 3 个 方向 需要 注意 。 
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oid 移动 网 站 开发 详解 


COD 将 传统 应 用 移植 的 软件 

这 不 一 定 意味 着 需要 把 整个 Microsoft Word 或 是 Adobe Acrobat 的 功能 都 在 新 平台 上 实现 出 来 , 不 
过 实现 一 个 方便 地 快速 预览 Gmail 的 邮件 秘书 应 用 ， 或 是 快速 计算 每 天 的 花 销 并 给 出 漂亮 的 月 度 和 季 
度 报告 的 账本 应 用 ， 那 应 该 是 容易 做 到 的 。 

无 论 如 何 ， 人 们 已 经 习惯 了 在 传统 平台 上 的 各 种 软件 ， 如 果 这 些 软件 在 新 平台 上 有 非常 好 用 的 蔡 
代 版 本 ， 那 么 人 们 是 愿意 为 之 付费 的 。 在 这 个 方向 上 赚钱 ， 比 较 容 易 的 一 点 是 不 需要 从 头 理 清 思路 ， 
因为 软件 应 该 做 成 什么 样子 ， 是 十 分 清楚 的 。 但 是 难点 在 于 要 从 大 量 的 模仿 者 中 脱颖而出 ， 这 需要 有 
自己 的 突出 特点 和 性 能 优势 。 此 类 软件 往往 会 因为 抓 住 了 某 一 个 群体 而 胜出 ， 如 做 了 很 可 爱 的 界面 而 
抓 住 了 年 轻 女 性 群体 ， 或 是 精简 了 交互 操作 而 抓 住 了 懒 人 一 族 等 。 

D 利用 了 新 平台 本 身 特色 的 软件 

新 平台 有 很 多 有 别 于 传统 平台 的 新 特色 ， 如 硬件 上 有 多 点 触 屏 和 甩 动 反馈 等 ， 利 用 这 些 新 设备 特 
色 可 以 做 出 不 少 有 意思 的 应 用 。 例 如 ， 大 多 数 人 都 会 想到 多 点 触 屏 可 以 进行 图 片 缩放 ， 但 是 就 有 人 想 
到 了 还 可 以 做 成 iPad 游戏 中 的 人 物 迁 跃 触发 。 而 利用 Android 的 有 忆 动 反馈 ， 有 人 做 出 了 钓鱼 忆 竿 和 类 
似 于 Wii 的 应 用 。 那 么 ， 如 此 有 创意 的 应 用 可 以 转化 成 滚滚 而 来 的 收入 ， 也 就 并 不 奇怪 了 。 

(3) 植 根 于 专业 服务 的 软件 

这 样 的 软件 其 实在 哪里 都 是 可 以 赚钱 的 ， 如 iPhone 的 千 元 软件 BarMax， 就 是 提供 针对 加 利 福 尼 
亚 州 的 专业 律师 资格 考试 的 咨询 和 培训 服务 的 软件 。 它 的 竞争 对 手 不 是 其 他 类 似 的 软件 一 一 因为 通常 
来 说 这 样 的 领域 是 空白 的 ， 是 在 线 下 的 专业 服务 ， 而 后 者 的 价格 则 高 达 数 千 美 元 。 所 以 ， 开 发 者 可 以 
借鉴 一 下 这 种 思路 ， 把 专业 服务 做 成 新 平台 上 的 软件 ， 既 实惠 了 用 户 ， 又 开拓 了 新 的 收入 来 源 。 


1.3 Android 的 巨大 优势 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 1 章 \Android 的 巨大 优势 .avi 
为 什么 Android 能 在 这 么 多 智能 系统 中 脱颖而出 ， 成 为 市 场 占 有 率 第 一 的 手机 系统 呢 ? 要 想 分 析 
其 原因 ， 需 要 先 了 解 它 的 巨大 优势 ， 分 析 究 况 是 哪些 优点 吸引 了 厂商 和 消费 者 的 青睐 。 


13.1 AHAN 


Android 出 身 于 Linux 世家 ， 是 一 款 开源 的 手机 操作 系统 。Android 功成名就 之 后 ， 各 大 手机 联盟 
纷纷 加 入 ， 该 联盟 由 包括 中 国 移动 、 摩 托 罗 拉 、 高 通 、 宏 达 电 和 T-Mobile 在 内 的 30 多 家 技术 和 无 线 
应 用 的 领军 企业 组 成 。 通 过 与 运营 商 、 设 备 制造 商 、 开 发 商 和 其 他 有 关 各 方 结 成 深层 次 的 合作 伙伴 关 
系 ， 希 望 借助 建立 标准 化 、 开 放 式 的 移动 电话 软件 平台 ， 在 移动 产业 内 形成 一 个 开放 式 的 生态 系统 。 


1.3.2 ”强大 的 开发 团队 


Android 的 研发 队伍 阵容 强大 ， 包 括 摩托 罗拉 、Google、HTC (宏达电 子 ) Philips. T-Mobile. 
高 通 、 魅 族 、 三 星 、LG 以 及 中 国 移动 在 内 的 34 家 企业 。 它 们 都 将 基于 该 平台 开发 手机 的 新 型 业务 ， 
应 用 之 间 的 通用 性 和 互联 性 将 在 最 大 程度 上 得 到 保持 。 并 且 还 成 立 了 手机 开放 联盟 ， 联 盟 的 成 员 包括 
手机 制造 商 、 半 导体 公司 和 软件 公司 等 ， 具 体 名 单 如 下 。 


e. 


COD 手机 制造 商 

台湾 宏 达 国 际 电子 HTC) (Palm 等 多 款 智能 手机 的 代 工 厂 ) 、 摩 托 罗拉 (美国 最 大 的 手机 制造 
商 ) 、 韩 国 三 星 电子 〈 仅 次 于 诺基亚 的 全 球 第 二 大 手机 制造 商 ) 、 韩 国 LG 电子 、 中 国 移动 (全 球 最 
大 的 移动 运营 商 )、 日 本 KDDI (2900 HHF). HÆ NTT DoCoMo (5200 万 用 户 )、 美 国 Sprint Nextel 
(美国 第 三 大 移动 运营 商 ，5400 JAA) 、 意 大 利 电 信 (Telecom Italia) 《意大利 主 要 的 移动 运营 商 ， 
3400 万 用 户 ) 、 西 班 牙 Telef6nica〈 在 欧洲 和 拉美 有 1.5 亿 用 户 ) 、T-Mobile〈 德 意志 电信 旗下 公司 ， 
在 美国 和 欧洲 有 1.1 亿 用 户 ) 。 

(2) 半导体 公司 

Audience Corp〔 声 音 处 理 器 公司 ) ~ Broadcom Corp (无 线 半导体 主要 提供 商 ) 、 英 特 尔 (Intel) ~ 
Marvell Technology Group. Nvidia (图 形 处 理 器 公司 ) ~ SiRF (GPS 技术 提供 商 ) ~ Synaptics (手机 用 
户 界面 技术 )、 德 州 仪器 (Texas Instruments)、 高 通 (Qualcomm)、 惠 普 HP (Hewlett-Packard Development 
Company, L.P) 。 

(3) 软件 公司 

Aplix, Ascender, eBay 的 Skype. Esmertec. Living Image. NMS Communications, Noser Engineering 
AG. Nuance Communications, PacketVideo. SkyPop. Sonix Network, TAT-The Astonishing Tribe, Wind 
River Systems. 


1.8.8. 诱 人 的 奖励 机 制 


现在 很 多 公司 为 了 提高 员工 工作 的 积极 性 ， 都 提出 了 奖励 机 制 ， 谷 歌 也 不 例外 。 为 了 提高 程序 员 
们 的 开发 积极 性 ， 谷 歌 公 司 不 但 为 他 们 提供 了 一 流 的 硬件 设置 和 软件 服务 ， 而 且 还 提出 了 振奋 人 心 的 
奖励 机 制 ， 例 如 在 定期 召开 开发 比赛 ， 用 创意 和 应 用 夺魁 的 程序 员 将 会 得 到 重奖 。 


1. 开发 Android 平台 的 应 用 


在 Android 平台 上 , 程序 员 可 以 开发 出 各 式 各 样 的 应 用 。Android 应 用 程序 是 通过 Java 语言 开发 的 ， 
只 要 具备 Java 开发 基础 , 就 能 很 快 上 手 并 掌握 。 作 为 单独 的 Android 开发 ， 对 Java 的 掌握 要 求 并 不 高 ， 
即使 没有 编程 经 验 的 门外汉 ， 也 可 以 在 突击 学 习 Java 之 后 不 影响 学 习 Android。 另 外 ，Android 完全 支 
持 2D、3D 和 数据 库 ， 并 且 和 浏览 器 实现 了 集成 。 所 以 通过 Android 平台 ， 程 序 员 可 以 迅速 、 高 效 地 
开发 出 绚丽 多 彩 的 应 用 ， 如 常见 的 工具 、 管 理 和 游戏 等 。 


2. 奖金 丰厚 的 Android 大 赛 


为 了 吸引 更 多 的 用 户 使 用 Android 开发 ， 已 经 成 功 举 办 了 奖金 为 1000 万 美元 的 开发 者 竞赛 。 鼓 励 
开发 人 员 创建 出 创意 十 足 、 十 分 有 用 的 软件 。 这 种 大 赛 对 于 开发 人 员 来 说 ， 不 但 能 提高 自己 的 开发 水 
平 ， 并 且 高 额 的 奖金 也 成 为 了 学 习 的 动力 。 

3. 在 Android Market 上 获取 收益 

为 了 能 让 Android 平台 吸引 更 多 的 关注 ， 谷 歌 开发 了 自己 的 Android 软件 下 载 店 Android Market, 
地 址 是 http://www.Android.com/market/. Android Market 允许 开发 人 员 将 应 用 程序 在 上 面 发 布 ， 也 允许 
Android 用 户 随 意 下 载 自己 喜欢 的 程序 。 作 为 开发 者 ， 需 要 申请 开发 者 账号 ， 然 后 才能 将 自己 的 程序 上 
传 到 Android Market， 并 且 可 以 对 自己 的 软件 进行 定价 。 所 以 说 ， 只 要 软件 程序 足够 吸引 人 ， 就 可 以 获 
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得 很 好 的 金钱 回报 ， 从 而 达到 学 习 、 赚 钱 两 不 误 。 
1.3.4 开源 


开源 意味 着 对 开发 人 员 和 手机 厂商 来 说 , Android 是 完全 无 偿 免 费 使 用 的 。 因 为 源 代 码 公开 的 原因 ， 
所 以 吸引 了 全 世界 各 地 无 数 热情 的 程序 员 。 于 是 很 多 手机 厂商 都 纷纷 采用 Android 作为 自己 产品 的 系 
统 ， 包 括 很 多 山寨 厂商 。 因 为 免费 ， 所 以 降低 了 成 本 ， 提 高 了 利润 。 而 对 于 开发 人 员 来 说 ， 众 多 厂商 
的 采用 就 意味 着 人 才 需 求 大 ， 所 以 纷纷 加 入 到 Android 开发 大 军 中 来 。 


1.4 搭建 Android 应 用 开发 环境 


G 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 1 章 \ 拱 建 Android 应 用 开发 环境 .avi 

书 中 有 云 “ 工 欲 善 其 事 ， 必 先 利 其 器 ”， 意 思 是 要 想 高 效 地 完成 一 件 事 ， 首 先 需 要 有 一 个 合适 的 
工具 。 对 于 Android 开发 人 员 来 说 ， 合 适 的 开发 工具 至 关 重 要 。 作 为 一 项 新 兴 技 术 ， 在 进行 开发 前 首 
先 要 搭建 一 个 对 应 的 开发 环境 。 但 是 Android 所 提供 的 就 业 机 会 太 多 了 ， 程 序 员 既 可 以 做 底层 开发 ， 
也 可 以 做 顶层 的 应 用 开发 。 其 中 底层 开发 大 多 数 是 指 和 硬件 相关 的 工作 ， 并 且 是 基于 Linux 环境 的 ， 
例如 开发 驱动 程序 ， 使 用 C 和 C++ 语言 来 实现 。 而 应 用 开发 是 指 开发 能 在 Android 系统 上 运行 的 程序 ， 
例如 游戏 、 地 图 等 程序 ， 使 用 Java 语言 来 实现 。 因 为 本 书 重点 讲解 应 用 开发 ， 所 以 接 下 来 只 讲解 搭建 
Android 应 用 开发 平台 的 方法 。 


1.4.1 安装 Android SDK 的 系统 要 求 


在 安装 一 款 软件 之 前 ， 需 要 先 考虑 机 器 能 不 能 满足 它 的 运行 环境 。 表 1-1 中 列 出 了 安装 Android 
应 用 开发 平台 的 硬件 需求 。 


表 1-1 开发 系统 所 需求 参数 


项 HB 版 本 要 求 说 HB 备注 
操作 系统 “| Windows XP 或 Vista Mac OS X | 根据 自己 的 计算 机 自行 选择 选择 自己 最 熟悉 的 操作 系统 
10.4.8+Linux Ubuntu Drapper 

软件 开发 包 | Android SDK 选择 最 新 版 本 的 SDK 截止 到 目前 , 最 新 手机 版 本 是 2.3 
Eclipse 3.3(Europa) 或 3.4(Ganymede)， 

IDE Eclipse IDE-ADT ADT (Android Development Tools) ”| 选择 for Java Developer 
开发 插件 
Java SE Development Kit 5 EÈ 6, (单独 的 JRE 不 可 以 ， 必 须要 

其 他 JDK Apache Ant Linux 和 Mac 上 使 用 Apache Ant 有 JDK) ， 不 兼容 Gnu Java 编 


1.6.5+, Windows 上 使 用 1.7+ 版 本 | 译 器 (gcj) 


Android 开发 工具 是 由 多 个 开发 包 组 成 的 ， 其 中 最 主要 的 开发 包 如 下 所 示 。 

JDK: 可 以 到 网 址 http://www.oracle.com/technetwork/java/javase/downloads/index.html 下 载 。 
Eclipse: 可 以 到 网 址 http://www.eclipse.org/downloads/ F £& Eclipse IDE for Java Developers. 
Android SDK: 可 以 到 网 址 http://developer.android.com 下 载 。 

下 载 对 应 的 开发 插件 。 


(e 
ARARA 


S1 Android pame 


1.4.2 XX JDK, Eclipse, Android SDK 


本 书 以 Windows 7 为 平台 ， 安 装 的 软件 为 JDK 1.6 . Eclipse 3.3, Android SDK 2.3。 下 面具 体 介 绍 
各 自 的 安装 步 又， 在 配套 的 视频 中 有 详细 的 介绍 。 


1. 安装 JDK 


安装 Eclipse 的 开发 环境 需要 JRE 的 支持 ,在 Windows 上 安装 JRE/JDK 非常 简单 ,看 下 面 的 流程 。 
(1) 在 Sun 官方 网 站 下 载 相应 软件 ， 网 址 为 http://www.oracle.com/technetwork/java/javase/downloads/ 
index.html， 如 图 1-7 所 示 。 


ccm New Downloads ' Top Downloads 


From enterprise software to developer tools, Sun offers a comprehensive suite of products that help to 
create solutions and increase productivity. The latest releases are available for download below. 


To see the list of all downloadable software from Sun, please visitthe Sun Download Center. 


[E] z More info. 


E Database 
Java DB $ 


£ Infrastructure Software. 
[8] Sun GlassFish Enterprise Server 二 
[8] Sun GlassFish ESB # 


[8] Java Database Connectivity (JDBC) 
* 


[8] Java Data Objects (JDO) # 
[E] Java Persistence API $ 
Emso e 
[E PostgreSQL & 

© Development Tools 

E Java Card 

© Java EE 

© Java ME 

E Java SE 

© JavaFX 


[8) identity Management & 

[8] Web Server $ 

[E Directory Server * 

[E Portal Server + 

[8] Web Proxy Server + 

Sun Java System Active Server 
Pages * 


(3) Networking Technologies 
© Solaris 

© Virtualization 

E Web Services. 


1-7 Sun 官方 下 载 页 面 


(2) 在 图 1-7 中 可 以 看 到 有 很 多 版 本 ， 运 行 Eclipse 时 虽然 只 需要 JRE 即 可 , 但 是 在 开发 Andriod 
应 用 程序 时 ， 需 要 完整 的 JDK ODK 包含 阴 E) ， 且 要 求 其 版 本 在 1.5+ 以 上 ， 这 里 选择 Java SE ODK) 


6， 其 下 载 页 面 如 图 1-8 所 示 。 


[ava Platform, Standard Edition 


IDK 6 Update 22 (JDK or JRE) 
his release includes performance improvements and 
security vulnerability fixes. Learn more » 


Java Do I Need? You must have a cony ofthe JRE 

java Runtime Environment) on your system to run Java 

pplications and applets. To develop Java applications 

ind applets, you need the JDK (Java Development Kit, 
ich includes the JRE. 


Download JDK] |Download JRE! 

lor 6 pocs [re 6 Docs. 
Installation Installation 
Instructions. Instructions. 
Readme Readme 


ReleaseNotes | ReleaseNotes 


Oracle License 上 | Oracle License 


Third Party Third Party 
Licenses Licenses 
Supported System} Supported System 
Configurations | Configurations 


L8 JDK 下 载 页 面 
(3) 在 图 1-8 中 找到 JDK 6 Update 22, 单 击 其 右 侧 的 Download 按钮 后 弹出 填写 登录 信息 的 界面 ， 


在 此 输入 账号 信息 ， 如 果 没有 账号 可 以 免费 注册 一 个 。 


然后 单 击 Continue 按钮 ， 如 图 1-9 所 示 。 
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There is more information on the available files for download on the Supported 
page. 


Select Platform and Language for your download: 


Platorm [Windows — 


Language: Multlanguage 


By selecting 'Continue' below, you hereby accept the terms and conditions ofthe Java SE 
Development Kit Gu22 License Agreement 


 Optionat Please Log In or Register for additional functionality and benefits. 
Or, click"Continue" now to proceed without Log In or Registration. 


User Name: Eample jim23 or iméompany.com. 


Password [eeeee eee 
* Register Now 
* Wt Register? 


* Eoraot User Name or Password ? 


图 1-9 输入 账号 信息 
CA) 进入 选择 操作 系统 和 语言 的 界面 ， 在 此 首先 选择 Windows， 然 后 单 击 Download 按钮 ， 如 图 1-10 
所 示 。 经 过 上 述 操作 后 ， 开 始 下 载 安 装 文件 jdk-6u22-windows-i586.exe。 


Platform: FAQ 


[windows 习 Installation Instructions. 
ReadMe 
Maagap ReleaseNotes 
Sun License. 


Pit ule Do or contu Mew quu Third Party Licenses 
hereby accept the terms and condicns of he 人 » 
IE Develcpssent Kt bri? License Agreonert. Supported System Configurations 


T Use Sun Download Manager (earn More) 
Your download will begin shortly. please. 


wait. 


Ckck here it your dovnload di not start 
uiomatcaly 


图 1-10 选择 Windows 


(5) 下 载 完成 后 双击 jdk-6u22-windows-i586.exe 开始 进行 安装 ， 将 弹出 安装 向 导 对 话 框 ， 在 此 单 
击 “ 下 一 步 ”按钮 ， 如 图 1-11 所 示 。 
(6) 进入 选择 安装 路 径 的 界面 ， 在 此 选择 文件 的 安装 路 径 ， 如 图 1-12 所 示 。 
I DESEE 
欢迎 使 用 Java(TM) SE Development Kit € Update 22 PEAS a pA 


此 有 时 特 引 导 您 完成 Java S Covoloomont Kité Updato 22 的 安村 过程. 一 
2 


so [m] xw 
图 1-11 安装 向 导 对 话 框 图 1-12 选择 安装 路 径 
CD 单 击 “ 下 一 步 ”按钮 ， 开 始 进行 安装 ， 如 图 1-13 所 示 。 
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(8) 完成 后 弹出 “Java 安装 -目标 文件 夹 ” gc 在 此 选择 要 安装 的 位 置 ， 如 图 1-14 所 示 。 


状态 : 


FiJsvalirel 


[TI [Cx 
Li] T5» 
图 1-13 开始 安装 图 1-14 “Java 安装 -目标 文件 夹 ”对 话 框 


(9) 单 击 “ 下 一 步 ” 按 钮 后 继续 开始 安装 ， 如 图 1-15 所 示 。 
(00 完成 后 进入 “成 功 安装 ”界面 ， 单 击 “ 完 成 ”按钮 后 完成 整个 安 3 
[D 


E277] 


过 程 ， 如 图 1-16 所 示 。 


Java(TM) SE Development Kit 6 Update 22 已 成 功 安装 


| 
产品 注册 是 免费 的 ， al 

现在 ， 您 可 以 免费 拥有 一 个 与 Microsoft Office Eo 
兼容 的 功能 全 面 的 办 公 套 件 “* 区 得 对 早期 版 本 和 文档 的 访问 权限 

了 PREIRATA 显示 20K 产品 表单 。 加 果 你 
ure a CE et 7 

peleci UE Y ed 人 
* ARH- PDF 导出 

A E i* i3  Openoffi 

= a OpenOfficeorg — 
Lm. | 
图 1-15 继续 安装 图 1-16 完成 安装 
完成 安装 后 可 以 检测 是 否 安装 成 功 ， 检 测 方法 是 选择 “开始 ”一 “运行 ”命令 ， 在 运行 框 中 输入 


“cmd” 并 按 Enter 键 ， 在 打开 的 CMD 窗口 中 输入 “java -version”， 如 果 显 示 如 图 1-17 所 示 的 提示 
信息 ， 则 说 明 安 装 成 功 。 


图 1-17 CMD 窗口 


如 果 上 面 的 安装 失败 ， 只 需 将 其 目录 的 绝对 路 径 添 加 到 系统 的 PATH 中 即 可 解决 。 具 体 步骤 如 下 。 
(OD 右 击 “我 的 电脑 ”， 在 弹出 的 快捷 菜单 中 选择 “属性 ”一 “高 级 ”命令 ， 单 击 下 面 的 “环境 
量 ” 按 钮 ， 在 “系统 变量 ” 栏 中 单 击 “ 新 建 ” 按 钮 ， 在 “变量 名 ”文本 框 中 输入 “JAVA_HOME”， 


图 
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在 “变量 值 ”文本 框 中 输入 刚才 的 目录 ， 如 这 里 输入 “F:\Java\jdk1.6.0 22”， 如 图 1-18 所 示 。 
(2) 再 次 新 建 一 个 变量 ， 名 为 classpath， 其 变量 值 如 下 所 示 。 
.;%JAVA_HOME%/lib/rt.jar:%JAVA_HOME%/lib/tools jar 
单 击 “ 确 定 ”按钮 找到 PATH 的 变量 ， 双 击 或 单 击 编辑 ， 在 变量 值 最 前 面 添加 如 下 值 。 
%JAVA_HOME%/bin; 


具体 如 图 1-19 所 示 。 


编辑 系统 变量 KIEJ 

XE [TAVA NOME 变量 名 中 classpath 

ERE QD: [F:\Java\jdki.6.0_22 zR V ib/rt. jar; JAVA HOMEX/1ib/tools. jar. 
—- | m | 


图 1-18 设置 系统 变量 图 1-19 设置 系统 变量 


(3) 再 依次 选择 “开始 ”一 “运行 ”命令 ， 在 运行 框 中 输入 “cmd” 并 按 Enter 键 ， 在 打开 的 CMD 
窗口 中 输入 “java -version”， 如 果 显示 如 图 1-20 所 示 的 提示 信息 ， 则 说 明 安装 成 功 。 


图 1-20 CMD 界面 


注意 : 上 述 变 量 设置 中 ， 是 按照 笔者 本 人 的 安装 路 径 设置 的 ， 笔 者 安装 JDK 的 路 径 是 C:\Program Files! 
Java\jdk1.6.0_22。 


2. 安装 Eclipse 
在 安装 好 JDK 后 ， 接 下 来 需要 安装 开发 工具 Eclipse， 具 体 步骤 如 下 。 
(1) 打开 Eclipse 的 官方 下 载 页 面 http://www.eclipse.org/downloads/， 如 图 1-21 所 示 。 


Eclipse Downloads 


[5 z 


图 1-21 下 载 页 面 


(2) 在 图 1-21 所 示 界 面 中 选择 Eclipse IDE for Java Developers (92MB) ,进入 其 下 载 的 镜像 页 面 ， 


e. 


#18 Androidga 00008 


在 此 只 需 选 择 离 用 户 最 近 的 镜像 即 可 (一般 推荐 的 下 载 速 度 就 不 错 ) ， 如 图 1-22 所 示 。 


Home Downloads Users Members Commiters Resouces Projects AboutUs Search 


Eclipse downloads - mirror selection 


under the terms and cordtone atthe Eclipse Foundation 
wt unies omewise spected 


eo- SRI-MN32 zip from 


图 1-22 选择 镜像 
(3) 下 载 完成 后 ， 先 找到 下 载 的 压缩 包 eclipse-java-galileo-SR1-win32.zip. 


注意 : 解压 下 载 的 压缩 文件 包 后 可 以 使 用 Eclipse， 而 无 须 进行 安装 ， 不 过 在 使 用 前 一 定 要 先 安装 JDK。 
笔者 将 Eclipse 解压 后 保存 在 目录 F:\eclipse 中 。 


CAD 进入 解压 后 的 目录 ,可 以 看 到 一 个 名 为 eclipse.exe 的 可 执行 文件 ， 双 击 此 文件 直接 运行 ，Eclipse 
能 自动 找到 用 户 先期 安装 的 JDK 路 径 ， 启 动 界面 如 图 1-23 所 示 。 


UL n 
echpse 


GALILEO, 


双击 启动 启动 画 
图 1-23 启动 Eclipse 
(5) 因为 是 安装 后 第 一 次 启动 Eclipse， 所 以 会 看 到 选择 工作 空间 的 提示 ， 如 图 1-24 所 示 。 此 时 
单 击 OK 按钮 ， 完 成 Eclipse 的 安装 。 


E 


Yorkspace: FF \eclipse rorkspacl zm], eee 


[7 Hee this as the default and do not esk again 


图 1-24 选择 工作 空间 
3. 安装 Android SDK 


接 下 来 开始 下 载 安装 Andriod SDK， 具 体 步 又 如 下 。 
(1) 打开 Android 开发 者 社区 ， 网 址 为 http://developer.android.com/， 然 后 转 到 SDK FERRARE 


发 详解 


址 是 http://developer.android.com/sdk/index.htmD ， 如 图 1-25 所 示 。 
Download the Android SDK 


Welcome Developers! If you are new to the Android SDK. please read the steps below. for an overview of how to set up the SDK 


If youre already using the Android SDK, you should update to the latest tools or platform using the Android SDK and AVD Mana 
starter package. See Adding SDK Components. 


M5 Cim 


29562413 bytes | 6b926d0c0287 1f1a946e65259984701a 


installer r16-windows exe (Recommended) 29561554 bytes 3521dda4904886b05980590f83cf3469 


Mac OS X (intel) android-sdk ri6-macosx zip 26158334 bytes d'idc2b6fi3eed5e3ceScf26c4edc47aa 
Linux (1386) android-sdk r16-inux tgz 22048174 bytes 3ba4571731451d23741c29c883024583 
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(2) 在 此 选择 用 于 Windows 平台 的 android-sdk r04-windows.zip， 下 载 页 面 如 图 1-26 所 示 。 


Home Dev Guide | Reference Blog Videos Community 


Android SDK Starter Package 1.1 The Anċroid Softwar» Devil epnent Kit (referred to in this License Agreement ar the "SIK" and specifically including the Android system Files, packaged 
APIs, and Google APIs aidons) is licensed to vow sabject to the teras of this License Ameement. This License Aereenent forns a legally biading contract 


Download 
pos etren yox eid Google in relation to yow wie of the SDE 

Downloadable SDK Components. 1.2 "Google" means Gcogle Ine., a Delevere corporation with prizcipal place »f business et 1600 japhiihestre Parkway, Mountain View, CA S4043, United States. 
Adding SDK Components PEE 
Andro ZA Pier et 2. Accepting this License Agreement 
Android 1.6 Platform "ew! 
Android 1 § Platrm 2A Tn order to use the SIK, you must first agree to this License Agreement. You may not use the SIK Sf you do zot accept this License Agrement 


> Older Platforms 
DK Tools, rane 
USR Driver far Windows, r2 
ADT Plugin for Eclipse. 
instaling and Updating (B) by ectvally using te SIK In this care, you agree that wre of the SDE constitutes acceptance of the Licensing Agreement fron that peint cnvards 
ADT O95 raw 


2.2 Yeu car ascept this License Agreement by: 


的 clicking to accept or agree ty this License Agrtenent, where this option is mide available to you or 


2.3 Yeu may mt use the SIK an muy not accept the Licensing Agreenert if yon ere a perzen barred fron receiving the SDK under the aws cf the United States 
Native Development Tools. ir other countries irelading tbe country in which you are resident or from Which you ure the SDK. 


Android 1 6 NOK ri 
2.4 If you are agreeing to be bound by this License Agreement or behilf of ysur employer or other entity, you represent and varrant that yon bave full legil 
More Intormation wathori ty to bind your vaglorer sr mach entity te this License Agreement. If you de not bava the requisite authority, You may iot accept Che Licunring. zi 


SDK System Renurements 


Z iconse Agresmeni] 


DK Terms and Conditions 
SDK Release Notes 


BOK Archives 


1-26 Android SDK 下 载 页 面 


(3) 选中 Iagree to the terms of the Android SDK License Agreement HHE, Hili Download 按钮 

开始 下 载 。 下 载 后 解压 压缩 文件 ， 例 如 将 下 载 后 的 解压 文件 保存 到 F:vandroid\ 目 录 下 ， 并 将 其 tools H 
录 的 绝对 路 径 添 加 到 系统 的 PATH 中 ， 具 体操 作 步 又 如 下 。 

© 右 击 “我 的 电脑 ”， 在 弹出 的 快捷 菜单 中 选择 “属性 ”一 “高 级 ”命令 ， 单 击 下面 的 “环境 变 
量 ” 按 钮 ， 在 “系统 变量 ” 栏 中 单 击 “ 新 建 ”按钮 ， 在 “变量 名 ”文本 框 中 输入 “SDK HOME" , 在 
“变量 值 ” 文 本 框 中 输入 刚才 的 目录 ， 如 这 里 输入 “F:vandroid-sdk-windows”， 如 图 1-27 所 示 。 

© 找到 PATH 的 变量 ， 双 击 或 单 击 编辑 ， 在 变量 值 最 前 面 加 上 “%SDK_HOME%\tools;”， 如 图 1-28 
所 示 。 


[c9 ] we | 


127 设置 系统 变量 图 1-28 设置 系统 变量 


e. 
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@ 再 依次 选择 “开始 ”一 “运行 ”命令 ， 在 运行 框 中 输入 “cmd” 并 按 Enter 键 ， 在 打开 的 CMD 
窗口 中 输入 一 个 测试 命令 ,例如 android -h， 如 果 显示 如 图 1-29 所 示 的 提示 信息 则 说 明 安 装 成 功 。 


4. 将 ADT 和 Eclipse HE 


Android 为 Eclipse 定制 了 一 个 专用 插件 Android Development Tools CADT) ， 此 插件 为 用 户 提 供 
了 一 个 强大 的 开发 Android 应 用 程序 的 综合 环境 。ADT 扩展 了 Eclipse 的 功能 ， 可 以 让 用 户 快 速 地 建立 
Android 项目, 创建 应 用 程序 界面 .要 安装 Android Development Tools plug-in, 首先 需要 打开 Eclipse IDE。 
然后 进行 如 下 操作 。 

(1) 打开 Eclipse 后 ， 依 次 选择 Help 一 Install New Software 命令 ， 如 图 1-30 所 示 。 


Help 


C) Welcome 


(7) Help Contents 
Up Search 
Dynamic Help 


Key Assist. CtrliShifttL 
Tips and Tricks. 

4j Report Bug or Enhancement. 
Cheat Sheets 


About Eclipse 


图 1-29 设置 系统 变量 图 1-30 ”添加 插件 


(2) 在 弹出 的 对 话 框 中 单 击 Add 按钮 ， 如 图 1-31 所 示 。 
一 
" 


z) o 


Find mere software by vorkize with the ‘Available Software Sites’ preferences. 


[m Version. 


Details 


二 | 
Ff Show only the latest versions of available software —— [7 Hide itens that are alreaty installed 
Fg ens by categ: That is already installed? 


T Contact all updata sitos during install te find required softvara 


图 1-31 添加 插件 
(3) 在 弹出 的 Add Site 对 话 框 中 分 别 输入 名 字 和 地 址 ， 具 体 名 字 可 以 自己 命名 ， 例 如 123， 但 是 在 


图 


Location 中 必须 输入 插件 的 网 络 地 址 http://dl-ssl.google.com/Android/eclipse/, WA 1-32 所 示 。 
[x] 


ttp://dl ss]. google. cn /Mndroi d/eclipse/ 


Ce | 


图 1-32 设置 地 址 
(4) 单 击 OK 按钮 ， 此 时 在 Install 窗口 中 将 会 显示 系统 中 可 以 使 用 的 插件 ， 如 图 1-33 所 示 。 


f} 
OW Jnárcié Hevelopment Tools 0.9.5. v200911191123-20404 


1-33 ”插件 列表 


C5) 选中 Android DDMS 和 Android Development Tools， 然 后 单 击 Next 按钮 进入 安装 界面 ， 如 图 1-34 
所 示 。 


Roviow Liconsos 
Licenses must ye rarieret bafore the software can be irstalled Tais includes licensat for softvare required te 
compete te astal, 


E irme De ND gamy 


Gr rarum aom 


和 Wiyn Task Terusst Interface Rec. 
Miya iiTant 


1-34 插件 安装 界面 


C6) 选中 I accept the terms of the license agreements 单 选 按钮 ， 单 击 Finish 按钮 ， 开 始 进行 安装 ， 


如 图 1-35 所 示 。 


图 1-35 开始 安装 


注意 : 此 步骤 的 计算 插件 会 占用 较 多 的 计算 机 资源 ， 所 以 安装 比较 慢 ， 需 要 耐心 等 待 。 完 成 后 会 提示 
重启 Eclipse 来 加 载 插 件 ， 等 待 重启 后 就 可 以 使 用 。 虽 然 不 同 版 本 的 Eclipse 安装 插件 的 方法 和 步 
又 是 不 同 的 ， 但 是 都 大 同 小 异 ， 读 者 可 以 根据 操作 提示 自行 解决 。 


1.4.8 ” 设 定 Android SDK Home 


当 完 成 上 述 插件 装备 工作 后 , 此 时 还 不 能 使 用 Eclipse 创建 Android 项 目 , 还 需要 在 Eclipse 中 设置 
Android SDK 的 主 目录 。 
(1) 打开 Eclipse， 依 次 选择 Window 一 Preferences 命令 ， 如 图 1-36 所 示 。 
(2) 在 弹出 的 界面 左 侧 可 以 看 到 Android 选项 ， 选 中 Android 后 ， 在 右 侧 设 定 Android SDK 所 在 
目录 SDK Location， 单 击 OK 按钮 完成 设置 ， 如 图 1-37 所 示 。 


图 1-36 选择 Preferences 命令 图 1-37 设置 目录 
1.4.4 验证 理论 


实践 是 检验 真理 的 唯一 标准 ， 接 下 来 新 建 一 个 项 目 来 验证 搭建 的 环境 是 否 可 行 。 


(1) 打开 Eclipse， 依 次 选择 File? New- Project 命令 ， 在 弹出 的 对 话 框 中 可 以 看 到 Android, A1 
图 1-38 所 示 。 


138 新建 项 目 


(2) 在 图 1-38 中 选择 Android， 单 击 Next 按钮 后 打开 New Android Project 对 话 框 ， 在 对 应 的 文 
本 框 中 输入 必要 的 信息 ， 如 图 1-39 所 示 。 
(3). 单 击 Finish 按钮 后 Eclipse 会 自动 完成 项 目的 创建 工作 ， 最 后 会 看 到 如 图 1-40 所 示 的 项 目 结构 。 


Androi dlani fest. xml 
lefault. properties 
test 


: g gen [Generated Java Files] 
-BÀ Android 1.1 


E assets 


Androi Mani fest. xnl 
efault. properties 


图 1-39 New Android Project 对 话 框 图 1-40 项 目 结构 


此 时 发 现在 Eclipse 中 的 Android 程序 没有 任何 错误 ， 这 说 明 刚 搭建 的 开发 环境 没有 问题 。 
1.4.5 创建 Android 虚拟 设备 (AVD) 


程序 开发 需要 调试 ， 只 有 经 过 调试 之 后 才能 知道 程序 是 否 能 够 正确 运行 。 作 为 一 款 手机 系统 ， 怎 
样 在 计算 机 平台 上 调试 Android 程序 呢 ? 谷歌 为 用 户 提供 了 模拟 器 来 解决 此 问题 。 所 谓 模拟 器 ， 就 是 
指 在 计算 机 上 模拟 Android 系统 , 可 以 用 这 个 模拟 器 来 调试 并 运行 开发 的 Android 程序 。 开 发 人 员 不 需 
要 一 个 真实 的 Android 手机 ， 只 通过 计算 机 即 可 模拟 运行 一 个 手机 ， 即 可 开发 出 应 用 在 手机 上 的 程序 。 
AVD 全 称 为 Android 虚拟 设备 (Android Virtual Device) ， 每 个 AVD 模拟 了 一 套 虚拟 设备 来 运行 
Android 平台 ， 该 平台 至 少 要 有 自己 的 内 核 、 系 统 图 像 和 数据 分 区 ， 还 可 以 有 自己 的 SD 卡 和 用 户 数据 
以 及 外 观 显示 等 。 创 建 AVD 的 基本 步骤 如 下 。 
(1) 单 击 Eclipse 菜单 中 的 轿 按 钮 ， 如 图 1-41 所 示 。 


E Java - Eclip: 


图 1-41 Eclipse 
(2) 在 弹出 的 Android SDK and AVD Manager 窗口 的 左 侧 导航 栏 中 选择 Virtual devices 选项 ， 如 


图 1-42 所 示 。 


图 1-42 Android SDK and AVD Manager 窗口 
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在 Virtual devices 列表 中 列 出 了 当前 已 经 安装 的 AVD 版 本 ， 可 以 通过 右 侧 的 按钮 来 创建 、 删 除 或 
修改 AVD。 主 要 按钮 的 具体 说 明 如 下 。 


Yer 


: 创建 新 的 AVD， 单 
: 修改 已 经 存在 的 AVD。 
: 删除 已 经 存在 的 AVD。 


ER&R 


: 击 此 按钮 在 弹出 的 界面 中 可 以 创建 一 个 新 AVD， 如 图 1-43 所 示 。 


: 启动 一 个 AVD 模 


CE x 


拟 器 。 


Nane: [ 


Target: 


CPU/ABI 
SD Card 


G Size mis vj 
C File 
Snapshot 
T^ Enabled 
Skin. 
G puiltin | z 
C Resolution: [ x 
YXardrare: 
Property |yase | New. 
r 
[Emm]. orem 


图 1-43 ”新建 AVD 界面 


注意 : 可 以 在 CMD 中 创建 或 删除 AVD， 例 如 可 以 按照 如 下 CMD 命 令 创建 一 个 新 的 AVD。 
android create avd -name <your_avd_name> --target <targetID> 


其 中 ，your avd_name 是 需要 创建 的 AVD 的 名 字 ，CMD 窗 口 如 图 1-44 所 示 。 


14.6 ”启动 AVD 模拟 器 


模拟 器 的 推出 给 Android 程序 的 开发 者 在 开发 和 测试 上 带 来 了 很 大 的 便利 。 无 论 在 Windows 下 还 
是 Linux 下 , Android 模拟 器 都 可 以 顺利 运行 , 并 且 官 方 提供 了 Eclipse 插件 , 可 将 模拟 器 集成 到 Eclipse 


e. 


图 1-44 CMD 窗口 
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的 IDE 环境 。Android SDK 中 包含 的 模拟 器 的 功能 非常 齐全 ， 电 话 本 、 通 话 等 功能 都 可 正常 使 用 〈 当 
然 通话 功能 是 虚拟 的 ) ， 其 内 置 的 浏览 器 和 Maps 都 可 以 联网 。 用 户 可 以 使 用 键盘 输入 、 鼠 标 单 击 模拟 
器 按键 输入 ， 甚 至 还 可 以 使 用 鼠标 单 击 、 拖 动 屏 幕 进行 操纵 。 


图 1-45 所 示 。 


在 调试 时 需要 启动 AVD 模拟 器 ， 启 动 AVD 模拟 器 的 基本 流程 如 下 。 
COD 选择 图 1-42 列表 中 名 为 mm 的 AVD， 单 击 | 按钮 后 弹出 Launch Options 对 话 框 ， 如 


(2) 单 击 Launch 按钮 后 将 会 运行 名 为 mm 的 模拟 器 ， 如 图 1-46 所 示 。 
[Essee 5000 


€ Launch Options 


d HVGA (320x480) 
i Medium (160) 


[V Wipe user data. 


Launch Cancel 
图 1-45 Launch Options 对 话 框 图 1-46 模拟 运行 界面 


注意 : 快速 安装 SDK 的 方法 。 


通过 Android SDK Manager 在 线 安装 的 速度 非常 慢 ， 而 且 有 了 时 容易 断 掉 。 其 实 可 以 先 从 网 络 中 寻 
找到 SDK 资 源 ， 用 迅雷 等 下 载 工具 下 载 后 ， 将 其 放 到 指定 目录 后 就 可 以 完成 安装 。 具 体 方法 是 
先 下 载 android-sdk-windows (选择 可 以 更 新 的 版 本 ) , 然后 在 android-sdk-windows 下 双击 setup.exe， 
在 更 新 的 过 程 中 会 发 现 安装 Android SDK 的 速度 是 1Kb/s， 此 时 打开 迅雷 ， 分 别 输入 下 面 的 地 址 : 
https://dl-ssl.google.com/android/repository/platform-tools r05-windows.zip 
https://dl-ssl.google.com/android/repository/docs-3.1 r01-linux.zip 
https://dl-ssl.google.com/android/repository/android-2.2 r02-windows.zip 
https://dl-ssl.google.com/android/repository/android-2.3.3 101-linux.zip 
https://dl-ssl.google.com/android/repository/android-2.1 r02-windows.zip 
https://dl-ssl.google.com/android/repository/samples-2.3.3 r01-linux.zip 
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https://dl-ssl.google.com/android/repository/samples-2.2 r01-linux.zip 
https://dl-ssl.google.com/android/repository/samples-2.1] r01-linux.zip 
https://dl-ssl.google.com/android/repository/compatibility r02.zip 
https://dl-ssl.google.com/android/repository/tools r11-windows.zip 
https://dl-ssl.google.com/android/repository/google apis-10 r02.zip 
https://dl-ssl.google.com/android/repository/android-2.3.1 r02-linux.zip 
https://dl-ssl.google.com/android/repository/usb driver r04-windows.zip 
https://dl-ssl.google.com/android/repository/googleadmobadssdkandroid-4. 1 .0.zip 
https://dl-ssl.google.com/android/repository/market licensing-r01.zip 
https://dl-ssl.google.com/android/repository/market billing r01.zip 
https://dl-ssl.google.com/android/repository/google apis-8 102.zip 
https://dl-ssl.google.com/android/repository/google apis-7 r0l.zip 
https://dl-ssl.google.com/android/repository/google apis-9 r02.zip 

可 以 继续 根据 自己 的 开发 要 求 选择 不 同 版 本 的 API。 

下 载 完成 后 将 它们 复制 到 android-sdk-windows/temp 目 录 下 ， 然 后 再 运行 setup.exe， 选 中 需要 的 
API 选 项 ， 会 发 现 马 上 就 可 以 安装 好 。 记 得 把 原始 文件 保留 好 ， 因 为 放 在 temp 目 录 下 的 文件 安装 
好 后 立刻 消失 。 
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Android 网 络 应 用 的 范围 比较 广泛 ， 主 要 包括 页 面 和 通信 等 方面 的 知识 。 因 为 Android 网 络 项 目 是 
用 Java 开发 的 ， 所 以 在 学 习 Android 网 络 应 用 开发 之 前 ， 需 要 先 了 解 Java 中 的 相关 网 络 技术 ， 这 样 才 
能 在 具体 实践 中 游 九 有余。 本 章 将 简要 讲解 Java 应 用 中 的 相关 网 络 技术 ， 为 读者 学 习 本 书后 面 的 知识 
打下 基础 。 
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E52 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 2 章 \HTML 简介 .avi 
HTML 是 一 种 网 页 标记 语言 ， 是 由 标记 组 成 的 。 几 乎 当前 所 有 的 网 页 都 是 通过 HTML 展现 在 我 们 
眼前 的 ， 最 新 的 HTML 版 本 是 刚刚 推出 的 HTML 5。 本 节 将 会 展示 它 的 各 种 标记 。 


2.1.1. HTML 初步 认识 


1. 基本 结构 
HTML 是 一 种 网 页 标记 语言 ， 它 的 所 有 部 分 都 由 标记 <> 和 </> 括 起 来 ， 来 看 下 面 的 代码 。 


<html> 

<head> 

<title> 这 是 网 页 的 标题 标签 </title> 
</head> 

<body> 

这 是 网 页 内 容 

<body></html> 


上 面 展示 的 代码 其 实 是 一 个 很 简单 的 网 页 。 网 页 就 是 通过 这 种 方式 展现 给 浏览 者 的 ， 其 中 的 各 个 
参数 介绍 如 下 。 
加 ”<html>…</html>: HTML 标签 ， 所 有 标记 都 要 放 在 这 里 ，<html> 是 开始 标签 ，</html> 是 结束 
标签 。 
加 ”<head>…</head>: 表示 网 页 的 头 部 。 
加 ”<title>…</title>: 表示 网 页 的 标题 。 
[ral 
2- 


<body>…</body>: 表示 网 页 的 内 容 。 
HTML 标记 特性 


HTML 必须 以 <html> 开 始 ， 以 <html> 结 束 ， 文 件 头 包含 在 <head> 和 </head> 里 面 ， 文 件 体 包含 在 
<body>…</body> 里 面 。 在 文件 头 部 , 用户 可 以 用 <title>…</title > 标记 来 声明 文件 标题 。 在 HTML 文档 


esa nw se 


中 ， 值 得 注意 的 是 HTML 也 有 注释 ， 但 和 Java 完全 不 同 ，HTML RA “<ER” ERER. E 
HTML 中 ， 每 个 标记 都 是 成 对 出 现 的 。 下 面 展示 一 段 代码 。 


<html> 

<head> 

<title> 欢 迎 进入 Java 网 络 世界 </title> 

</head> 

<body> 

这 里 是 Java 网 络 世界 ! 

<body> 

</html> 

将 文件 保存 为 HTML 文件， 双击 打开 ， 会 得 到 如 图 2-1 所 示 ) 次 凶 进 入 Jevo 网 络 世界 [EE 

效果 IHO RRO FEV PLO SEQ 
的 效果 。 | CURRO Deaf E 
p Š € @ tile/// Q GI 图 - 百 记 

2.4.2 ”字体 格式 设置 a nass gnus O 新 手 上 路 > 


文字 是 网 页 中 经 常 出 现 的 内 容 ， 不 同 的 网 页 ， 其 字体 也 不 同 。 STAA 


这 在 HTML 中 是 如 何 实现 的 呢 ? 接 下 来 将 一 一 为 大 家 进行 讲解 。 EA EITT 
1. 设置 标题 图 2-1 第 一 个 HIML 页 面 


在 HTML 中 ， 用 户 可 以 通过 <hn>…</hn> 来 设置 标题 的 大 小 ， 
n 的 值 可 以 取 1~6 中 的 任意 一 个 整数 。 下 面 通过 一 段 HTML 代码 讲解 该 问题 ， 代 码 如 下 。 


<html> 

<head> 

<title> 标 题 标 记 </title> 

</head> 

<body> 

<h1> 相 信 标 题 标记 的 力量 </h1> 
<h2> 相 信 标 题 标记 的 力量 </h2> 
<h3> 相 信 标 题 标记 的 力量 </h3> 
<h4> 相 信 标 题 标记 的 力量 </h4> 
<h5> 相 信 标 题 标记 的 力量 </h6> 
<body> 

</html> 


将 上 述 代 码 保 存 为 .html 格式 ， 双 击 打 开 后 会 得 到 如 图 2-2 所 示 的 结果 。 

2. 字体 加 粗 、 倾 儿 和 加 底线 

在 创建 网 页 时 ， 将 字体 加 粗 、 倾 斜 和 加 底线 是 避免 不 了 的 ， 它 们 是 通过 什么 样 的 标记 语言 实现 的 
呢 ? 下 面 通 过 一 段 HTML 代码 进行 讲解 ， 代 码 如 下 。 


<html> 

<head> 

<title> 加 粗 倾斜 加 底线 </title> 
</head> 

<body> 


e. 
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相信 标题 标记 的 力量 <br></br> 

<b> 相 信 标 题 标记 的 力量 </b><br></br> 
<|> 相 信 标 题 标记 的 力量 </l><br></br> 
<u> 相 信 标 题 标 记 的 力量 </u><br></br> 
<body> 

</html> 


在 上 述 代 码 中 出 现 了 几 个 新 的 标记 ， 介 绍 如 下 。 
加 ”<b>…</b>: 将 文字 加 粗 。 

B <br><br>: 用 来 换行 。 

加 ”<I>…</>: 将 文字 倾斜 。 

B] «wu: 给 文字 加 上 底线 。 
执行 代码 后 得 到 如 图 2-3 所 示 的 结果 。 

标题 标记 - Micros 


SSO- [cues imd sertin ts x = = [Ø c:\Docments imd settin ty | xX 


wk |a [| &- 8- &-gzxso- i m DTI T La-a- @-- nmo- 
相信 标题 标记 的 力量 i 

相信 标题 标记 的 力量 
相信 标题 标记 的 力量 


AEI MZ S 
相信 标题 标记 的 力量 相信 标题 标记 的 力量 
相信 标题 标记 的 力量 

相信 标题 标记 的 力量 


图 2-2 标题 标记 图 2-3 将 文字 加 粗 、 倾 斜 和 加 底线 
3. 将 字体 加 上 删除 线 ， 设 置 为 打字 体 和 下 标 


在 创建 网 页 时 ， 有 时 需 为 文字 加 上 删除 线 ， 设 置 为 打字 体 和 下 标 。 下 面 通过 一 段 HTML 代码 进行 
讲解 ， 代 码 如 下 。 


<html> 

<head> 

«title» 38 5:8 HTML «/title- 
</head> 

<body> 

神奇 的 HTML 

<br></br> 

<DEL> 神 奇 的 HTML</DEL><br></br> 
<TT> 神 奇 的 HTML</TT><br></br> 
神奇 的 HTML 

<SUP> 神 奇 的 HTML</SUP> 
<body> 

</html> 


在 代码 中 出 现 了 新 的 标记 ， 介 绍 如 下 。 
回 <DEL>…</DEL>: 将 文字 加 上 删除 线 。 
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回 <TT>…</TT>: 呈现 类 似 打 字体 或 者 等 宽 的 文本 效果 。 
M <SUP></SUP>: 将 文字 设置 成 上 标 。 
执行 代码 后 得 到 如 图 2-4 所 示 的 结果 。 


4. 设 定 字 体 大 小 、 颜 色 和 字形 


大 小 、 颜 色 和 字形 标记 是 字体 的 常用 格式 ， 几 乎 所 有 网 页 都 会 设置 这 3 种 属性 。 它 们 和 前 面 所 讲 
属性 有 所 不 同 ， 下 面 通过 一 段 HTML 代码 进行 讲解 。 代 码 (2-1.htm 如 下 。 


<html> 
<head> 
<title> 设 置 文字 的 格式 </title> 
</head> 
<body> 
«font color="#CC200" size="5" face=" 隶 书 "> 还 好 吗 ? 现在 过 的 无 忧 无 虑 还 是 仍然 那样 多 愁 善 感 ? 我 好 几 次 
都 在 梦 中 梦 到 过 你 ， 你 有 的 时 候 是 哭 着 的 ， 有 的 时 候 却 又 笑 得 毫 无 遮掩 。 弄 得 我 不 知 所 措 ， 搞 不 清 是 该 安慰 还 是 
该 保持 沉默 ， 可 等 我 醒 了 以 后 ， 却 发 现 你 好 像 在 梦 里 什么 都 没有 说 过 ， 只 是 哭 或 者 笑 ， 于 是 我 猜 ， 你 肯定 是 有 说 
不 出 的 悲伤 和 快乐 。</font> 
<br> 
<font color="#ee00FF" size-"4" face=" 宋 体 "> 弄 得 我 不 知 所 措 ， 搞 不 清 是 该 安慰 还 是 该 保持 沉默 ， 可 等 我 醒 
了 以 后 , 却 发 现 你 好 像 在 梦 里 什么 都 没有 说 过 , 只 是 哭 或 者 笑 , 于 是 我 猜 , 你 肯定 是 有 说 不 出 的 悲伤 和 快乐 。</font> 
</body> 
</html> 


如 果 要 设置 字体 大 小 、 颜 色 和 字形 ， 用 户 可 以 在 首 标签 中 设置 ， 各 个 参数 的 介绍 如 下 。 
回 color-""; 设置 颜色 。 

回 size="": 设置 字号 。 

回 face-""; 设置 字体 。 

执行 上 述 代 码 后 得 到 如 图 2-5 所 示 的 结果 。 


j- [Bc wm à Sete [| X 


S Bc wernt ma seein El E e [ai] dro Genzmer B-H &-D*so-QrAo-" 
wonm F a-a &-o5ao- 


E ) 现在 过 的 无 忧 无 虑 还 是 仍然 那样 多 感 普 
神奇 的 HTIL 感 ?我 好 几 次 都 在 梦 中 梦 到 过 你 ， 你 有 的 时 候 是 吕 
着 的 ， 有 的 时 候 却 又 医 得 带 无 代 掩 . 弄 得 我 不 知 所 
HHOH 措 ， 搞 不 清 是 该 安慰 还 是 该 保持 沈默 ， 可 等 我 本 了 
m—— 以 后 ， 却 发 现 你 好 像 在 梦 里 什么 都 没有 说 过 ， 只 是 
器 或 者 和 疾 ， 于 是 我 猜 ， 你 肯定 是 有 说 不 出 的 茧 伤 和 


神奇 的 HTIL PARETE 
AT 是 说 保持 沉默 ， 可 等 我 醒 了 以 
GEE 没有 说 过 ， 只 是 办 或 者 笑 ， 于 是 我 

出 的 悲伤 和 快乐 。 


2-4 为 文字 加 上 删除 标记 、 打 字体 和 上 标 样式 图 2-5 设置 字体 


2.1.3 ”使 用 标示 标记 


TE HTML 语言 中 ， 为 了 使 显示 的 文字 更 加 工整 ， 条 理 顺 序 更 加 明朗 ， 就 要 用 到 标示 标记 。 下 面 通 


e. 


#28 Android 网 络 开发 技 


过 一 段 HTML 代码 进行 讲解 。 代 码 〈2-2.html) 如 下 。 


<html> 
<head> 
«title» 标示 标记 </title> 
</head> 
<body> 
<li> 中 国人 
<I> 英 国人 
<I> 德 国人 
«ol type=l> 
<li> 打 开 冰 箱 门 
<li> 把 它 装 进去 
<li> 关 上 冰箱 门 
</ol> 
«dl» 
<dt> 性 别 : <dd> 男 、 女 
<dt> 职 业 :<dd> 工 程 师 、 教 师 、 程 序 员 


</dl> 
</body> 
</html> 
上 述 代码 中 各 个 参数 的 介绍 如 下 。 Bos Ss CM LAE E 
回 odi: 设置 项 目 。 1284 
EP ”<ol>…</ol>: 和 <li> 组 合 ， 将 形成 带 编号 “mA 
的 项 目 ,编号 采取 什么 字体 , 取决 于 tpe。 i ENS 
回 <d>: 用 于 定义 项 目 。 Hoe 
ED «dde. 定义 资料 。 "ole 
IR. sm. UFA 


回 <dl>…</dlj>: 定义 标示 。 
执行 上 述 代码 后 得 到 如 图 2-6 所 示 的 结果 。 


2.1.4 “使 用 区 域 和 段落 标记 EE 


在 设计 网 页 时 ， 区 域 和 段落 在 HTML 中 是 必 
不 可 少 的 ， 前 面 已 经 使 用 过 <br>…</br> 换 行 。 下 面 讲解 几 个 重要 的 区 域 标记 和 段落 标记 。 


1. <hr> 水 平 线 
在 许多 页 面 中 ， 为 了 文字 的 美观 性 ， 经 常 需要 插入 水 平 线 标 记 。 下 面 将 通过 一 段 代 码 讲解 几 种 绘 


制 分 割 线 的 方法 ， 其 代码 〈2-3.html) 如 下 。 


<html> 
<head> 
<title> 水 平 线 的 插入 </title> 
</head> 
<body> 
绘制 水 平 线 
<hr> 


绘制 水 平 线 
«hr width="120%"> 
绘制 分 割 字符 串 的 水 平 线 
«hr width="30%" size="4"> 
绘制 分 割 字符 串 的 水 平 线 
<hr width="400" size="30" noshade> 
水 平 线 的 不 同 对 齐 方式 
«hr align="left" width="400" size="10"> 
«hr align-"center" width-"400" size="10"> 
«hr align="right" width="400" size-"10"» 
</body> 
</html> 


参数 介绍 如 下 。 

EP ”<hr>…</hr>: 插入 水 平 线 ， 在 前 面 标记 的 参数 是 水 平 线 的 属性 。 

B width: 水平线 的 宽度 ， 可 以 用 百分数 成 像素 来 表示 。 

B align: 水 平 线 的 位 置 ， 可 以 设置 为 left， 表 示 居 左边 对 齐 ; 设置 为 center， 表 示 居 中 对 齐 ; 设 
置 为 right， 表 示 居 右边 对 齐 。 

双击 打开 网 页 后 会 看 到 如 图 2-7 所 示 的 效果 。 
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绘制 水 平 线 
绘制 水 平 线 
绘制 分 市 字 符 串 的 水 平 线 
绘制 分 市 字符 串 的 水 平 线 


水 平 线 的 不 同 对 齐 方式 


图 2-7 水 平 线 的 插入 
2. <p>…</p> 段 落 标记 
在 段落 间 ， 可 以 使 用 标记 <p>…</p>， 让 网 页 之 间 形 成 一 行 空白 。 需 要 注意 的 是 ， 可 以 省 略 </p>。 
下 面 通 过 代码 进行 讲解 ， 其 代码 〈2-4.html) 如 下 。 


<html> 
<head> 
<title> 我 的 心 跟着 希望 在 动 </title> 
</head> 
<body> 


<p> 
我 的 未 来 不 是 梦 
sp» 


e. 


<p> 
我 的 心 跟着 希望 在 动 
</body> 
</html> 


执行 上 述 代码 后 得 到 如 图 2-8 所 示 的 结果 。 
2.1.5 ”使 用 表格 标记 


Java 是 优秀 的 动态 设计 语言 ， 在 许多 时 候 需 要 为 
浏览 者 表现 一 些 数据 , 而 表格 是 表现 数据 的 最 好 工具 。 
优秀 的 Java 编程 设计 者 是 离 不 开 表格 标记 语言 的 , 接 
下 来 将 详细 介绍 表格 标记 的 使 用 方法 。 

1. <table> 容 器 标记 


表格 实际 上 是 一 个 容器 ， 用 它 来 装 各 种 数据 。 下 面 
通过 一 段 代码 进行 讲解 ， 其 代码 〈2-5html) 如 下 。 

«html > 

<head> 

<title> 表 格 </title> 

</head> 


<body> 
<table width="200" border="1"> 
<tr> 
<td width="63"> 姓 名 </td> 
<td width="71"> 语 文 </td> 
<td width="44"> 数 学 </td> 
</tr> 
<tr> 
<td> 张 三 </td> 
<td>78</td> 
<td>65</td> 
</tr> 
<tr> 
<td height="23"> 李 四 </td> 
<td>45</td> 
<td>67</td> 
</tr> 
</table> 
</body> 
</html> 


上 述 代码 中 ， 各 个 表格 参数 的 说 明 如 下 。 
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我 的 心 深 着 希 望 在 动 - Nicrosoft Internet Explorer [EBR] 


SO Erta X | 
Yr 安居 我 的 0 着 希望 在 动 


我 的 未 来 不 是 梦 
我 的 心 跟着 项 望 在 动 


2-8 段落 标记 


E] ”<table>…</table>: 表格 区 域 ， 开 始 标签 中 可 以 定义 表格 的 属性 ， 这 里 定义 了 表格 的 宽度 和 表 


格 边框 线 的 粗细 。 
加 ”<td>…</td>: 单元 格 。 


图 
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BP ocu: 表格 中 的 行 。 
执行 上 述 代 码 ， 得 到 如 图 2-9 所 示 的 结果 。 


2. 表格 标题 


通过 <caption>…</caption> 标 记 可 以 为 表格 设置 标题 。 设置 方法 十 分 简单 , 下面 用 一 段 HTML 代码 
进行 讲解 ， 其 代码 〈2-6.html) 如 下 。 


<html > 

<head> 

<title> 表 格 </title> 

</head> 

<body> 

<table width="400" border="1"> 

<caption align="center"> 重 庆 万 州 二 小 一 年 级 二 班期 末 成 绩 </caption> 


<tr> 
<td width="63"> 姓 名 </td> 
<td width="71"> 语 文 </td> 
<td width="44"> 数 学 </td> 
<hr> 
<tr> 
«td» 3K— </td> 
<td>78</td> 
<td>65</td> 
<hr> 
<tr> 
<td height="23"> 李 四 </td> 
<td>45</td> 
<td>67</td> 
</tr> 
</table> 
</body> 
</html> 


参数 align 表示 水 平 线 的 对 齐 方式 。 设 置 为 left， 表 示 居 左边 对 齐 ; 设置 为 center， 表 示 居 中 对 齐 ， 
设置 为 right， 表 示 居 右边 对 齐 。 
执行 上 述 代码 后 得 到 如 图 2-10 所 示 的 结果 。 


O- [Ertuna en x 
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重庆 万 州 二 小 一 年 级 二 班期 末 成 绩 
语文 数学 
8 65 
45 6 


图 2-9 表格 图 2-10 表格 标题 
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3. 表格 中 的 标题 栏 


在 前 面 的 学 习 成 绩 表 中 ， 虽 然 有 标题 栏 ， 但 是 它 和 普通 的 文字 没有 什么 区 别 。 在 表格 中 ， 有 专门 
的 标题 栏 标记 <th>…</th>。 下 面 通过 一 段 HTML 代码 进行 讲解 ， 其 代码 〈2-7.html) 如 下 。 


<html > 
<head> 
<title> 表 格 </title> 
</head> 


<body> 
<table width="400" border="1"> 
«caption align="center"> 重 庆 万 州 二 小 一 年 级 二 班期 末 成 绩 </caption> 
<tr> 
<tr><th colspan="3"> 语 文 和 数学 成 绩 </th></tr> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 数 学 </th> 
</tr> 
<tr> 
<td> 张 三 </td> 
<td>78</td> 
<td>65</td> 
</tr> 
<tr> 
<td height="23"> 李 四 </td> 
<td>45</td> 
<td>67</td> 
</tr> 
</table> 
</body> 
</html> 


执行 上 述 代码 后 得 到 如 图 2-11 所 示 的 结果 。 
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重庆 万 州 二 小 一 年 级 二 班期 末 成 绩 
语文 和 数学 成 绩 
语文 


TE HTML 中 , 表单 的 重要 性 不 言 而 喻 , 它 是 服 
务 器 和 浏览 者 进行 交互 的 窗口 , 接 下 来 将 详细 讲解 
表单 控件 和 表单 组 件 的 基本 使 用 方法 。 


姓名 数学 


1. 容器 form 
在 HTML '}, «form >…</form> 表 示 表 单 的 容 图 2-11 表格 的 标题 标签 


器 ， 建 立 容器 后 ， 才 能 建立 各 个 组 件 。 下 面 通过 一 
Pt HTML 代码 进行 讲解 ， 其 代码 〈2-8.html) 如 下 。 


<html > 
<head> 
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«meta http-equiv-"Content- Type" content-"text/html; charset-utf-8" /> 


<title> 表 单 容器 </title> 
</head> 
<body> 
form 容器 
«form id="form1" name-"form1" method="post" action=""> 
</form> 
</body> 
</html> 
参数 说 明 如 下 。 
B <form >…</form>: 表单 容器 的 标记 。 
回 id-e"forml": 表单 的 ID 名 称 ， 名 称 是 forml 。 
E] name-"forml": 表单 名 称 。 
E] method="post": 数据 的 传送 方式 。 
El action=": 传送 页 面 的 设置 。 用 户 可 以 设置 一 个 Java 的 Web 页 面 ， 用 来 处 理 这 个 信息 。 
执行 上 述 代码 后 得 到 如 图 2-12 所 示 的 结果 。 
2. 单行 文本 框 
单行 文本 框 是 一 种 常用 组 件 。 下 面 创建 一 个 单行 文本 框 ， 其 代码 〈2-9.html) 如 下 。 
<html> 
<head> 
«meta http-equiv-"Content-Type" content-"text/html; charset=utf-8" /> 
<title> 文 本 框 </title> 
</head> 
<body> 
«form id="form1" name-"form1" method="post" action=""> 
请 输入 你 的 名 字 : 
«input type-"text" name-"textname" id="textname" /> 
</form> 
</body> 
</html> 


文本 框 的 属性 参数 很 多 ， 除 上 面 的 .type、name、id 外 ， 还 有 size. value 等 。 用 户 不 必 记 住 ， 在 后 
面 会 讲解 如 何 进 行 可 视 化 操作 。 执 行 上 述 代码 后 得 到 如 图 2-13 所 示 的 结果 。 


DO [Ernte] [x GO- Erte dls |x IB 
XI aseo nm * [mem [rx 9-8 e nmo " 
请 输入 你 的 名 字 ， 
fom 容 器 
图 2-12 表单 容器 图 2-13 单行 文本 框 
3. 密码 文本 框 


密码 框 也 是 比较 常见 的 表单 元 素 。 下 面 通 过 一 段 代 码 进行 讲解 ， 其 代码 〈2-10.html) 如 下 。 


e. 
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<html> 
<head> 
«meta http-equiv-"Content-Type" content="text/html; charset=utf-8" /> 
<title> 密 码 文 本 框 </title> 
</head> 
<body> 
«form id="form1" name="form1" method="post" action=""> 
请 输入 你 的 名 字 : 
«input type="text" name-"textname" id-"textname" /> 
请 输入 的 密码 : 
<input type="password" name-"password" id-"password" /> 
</form> 
</body> 
</html> 
执行 上 述 代码 后 得 到 如 图 2-14 所 示 的 效果 。 
* & ame -D&O Go.” 
PAARE tira 请 输入 的 密码 。 eere 
图 2-14 密码 文本 框 
4. 单 选 按钮 


单 选 按钮 是 只 能 选中 一 个 选项 的 列表 项 。 下 面 讲解 单 选 按钮 的 实现 方法 ， 其 代码 〈2-11.html) 
如 下 。 


<html > 
<head> 
«meta http-equiv="Content-Type" content-"text/html; charset-utf-8" /> 
<title> 单 选 按钮 </title> 
</head> 
<body> 
«form id="form1" name-"form1" method="post" action=""> 
<p> 
<input type="radio" name="radio" id="D1" value="D1" /> 橘子 
<br /> 
<input type="radio" name="radio" id="D2" value="D2" /> 苹果 
<br/> 
<input type="radio" name="radio" id="D3" value="D3" /> 
RF 
</form> 
</body> 
</html> 
执行 上 述 代 码 后 得 到 如 图 2-15 所 示 的 结果 。 
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2-15 ” 单 选 按钮 
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5. 多 行文 本 框 和 按钮 


多 行文 本 框 和 按钮 在 表单 中 的 作用 举足轻重 。 下 面 通过 一 个 实例 进行 讲解 ， 其 代码 〈2-12.html) 
如 下 。 


<html > 

<head> 

«meta http-equiv-"Content- Type" content-"text/html; charset=utf-8" /> 

<title> 多 行文 本 框 和 按钮 </title> 

</head> 

<body> 

«form id="form1" name="form1" method="post" action=""> 
<textarea name-"Ri" cols="56" rows="10"></textarea> 
<br /> 

«input type="submit" name-"Tj" id="Tj" value=" 提 交 " /> 

<input type="reset" name="Tj2" id="Tj2" value=" 重 置 " /> 

</form> 

</body> 

</html> 


以 上 代码 创建 了 一 个 多 行文 本 框 和 两 个 按钮 ， 执 行 上 述 代 码 后 得 到 如 图 2-16 所 示 的 结果 。 


多 行文 本 框 和 按 要 x 
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天 到 xm] 


图 2-16 多 行文 本 框 和 按钮 


22 XML 技术 


CB 知 识 点 讲解 : 光盘 \ 视 频 讲解 第 2 章 \XML 技术 .avi 

XML (eXtensible Markup Language) 即 可 扩展 标记 语言 ， 与 HTML 一 样 ， 都 是 SGML (Standard 
Generalized Markup Language， 标 准 通 用 标记 语言 ) 。XML 是 Internet 环境 中 跨 平台 、 依 赖 于 内 容 的 技 
术 ， 是 当前 处 理 结构 化 文档 信息 的 有 力 工具 。XML 是 一 种 简单 的 数据 存储 语言 ， 使 用 一 系列 简单 的 标 
记 描述 数据 ， 而 这 些 标记 可 以 用 方便 的 方式 建立 。 虽 然 XML 占用 的 空间 比 二 进 制 数据 占用 的 空间 多 ， 
但 XML 极其 简单 ， 更 易于 掌握 和 使 用 。 


e. 
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2.2.1 XML 的 概述 


XML 与 Access、Oracle 和 SQL Server 等 数据 库 不 同 , 数据 库 往 往 提供 了 强 有 力 的 数据 存储 和 分 析 
能 力 ， 如 数据 索引 、 排 序 、 查 找 、 相 关 一 致 性 等 ， 而 XML 仅 是 展示 数据 。 事 实 上 ，XML 与 其 他 数据 
表现 形式 最 大 的 不 同 是 : 它 极 其 简单 。 

XML 的 简单 使 其 易于 在 任何 应 用 程序 中 读 写 数据 , 这 使 XML 很 快 成 为 数据 交换 的 唯一 公共 语言 ， 
虽然 不 同 的 应 用 软件 也 支持 其 他 的 数据 交换 格式 ， 但 不 久之 后 它们 都 将 支持 XML， 这 就 意味 着 程序 可 
以 更 容易 地 与 Windows, Mac OS. Linux 以 及 其 他 平台 下 产生 的 信息 相 结合 ， 可 以 很 轻易 地 加 载 XML 
数据 到 程序 中 进行 分 析 ， 然 后 以 XML 格式 输出 结果 。 

为 了 使 得 SGML 用 户 友好 ，XML 重新 定义 了 SGML 的 一 些 内 部 值 和 参数 ， 去 掉 了 大 量 繁杂 但 很 
少 使 用 的 功能 。XML 保留 了 SGML 的 结构 化 功能 ， 网 站 设计 者 可 以 定义 自己 的 文档 类 型 。XML 同时 
也 推出 了 一 些 新 型 文档 类 型 ， 开 发 者 也 可 以 不 必定 义 文档 类 型 。 

XML 由 W3C 制定 ，XML 的 标准 化 工作 由 W3C 的 XML 工作 组 负责 ， 该 小 组 成 员 由 来 自 不 同 地 
方 和 行业 的 专家 组 成 ， 他 们 通过 Email 交流 对 XML 标准 的 意见 ， 并 提出 自己 的 看 法 Cwww.w3.org/ 
TR/WD-xml) 。 因 为 XML 是 个 公共 格式 〈 它 不 专属 于 任何 一 家 公司 ) ， 用 户 不 必 担 心 XML 技术 会 成 
为 少数 公司 的 盈利 工具 ，XML 也 不 是 一 个 依附 于 特定 浏览 器 的 语言 ， 而 是 一 门 可 以 完全 独立 应 用 的 新 


型 语言 。 


2.2.2 XML 的 语法 


上 面 虽然 讲解 了 XML 的 特点 ， 但 很 多 初学 者 仍然 不 明白 XML 主要 用 来 做 什么 。 其 实 ，XML fF 
么 也 不 做 ， 它 只 用 来 存储 数据 ， 并 对 HTML 语言 进行 扩展 。XML 和 HTML 分 工 很 明显 ，XML 用 来 存 
储 数 据 ， 而 HTML 用 来 表现 数据 。 下 面 通 过 一 段 程序 代码 进行 讲解 ， 其 代码 〈2-2.xml) 如 下 。 


<?xml version="1.0" encoding="utf-8"?> 
<book> 

<person> 
<first>Kiran</first> 
<last>Pai</last> 
<age>22</age> 
</person> 
<person> 
<first>Bill</first> 
<last>Gates</last> 
<age>46</age> 
</person> 
<person> 

«first» Steve«/first 
*last»Jobs«/last- 
<age>40</age> 
</person> 

</book> 


XML 代码 只 要 符合 语法 ， 还 可 以 写成 汉语 ， 如 下 面 代码 (2-3.xml》 所 示 。 


(0 Android 移动 网 站 开发 详解 


<?xml version="1.0" encoding="utf-8"?> 

< 项 目 > 
< 名 > 天 上 星 </ 名 > 
< 电子 邮件 >tianshangxing@hotmail.com</ 电 子 邮 件 > 
< 住宅 > 何 国 何 市 何 区 何 街道 何 番号 </ 住 宅 > 
< 电话 >86-021-742745674</ 电 话 > 
< 一 言 >XML 学 习 </ 一 言 > 

</ 项 目 > 


从 上 面 两 段 代码 可 以 看 出 ，XML 的 标记 完全 由 用 户 自 由 定义 ， 不 受 约束 ， 只 用 来 存储 信息 。 除 了 
第 一 行 代码 相对 固定 以 外 ， 其 他 代码 只 需 注意 前 后 标签 一 致 、 末 标签 不 能 省 略 即 可 。 下 面 将 XML 语法 
格式 总 结 如 下 。 

B ”第 一 行 要 对 XML 进行 声明 ， 也 就 是 XML 的 版 本 。 

回 XML 的 标记 和 HTML 一 样 是 成 对 出 现 的 。 

E] XML 对 标记 的 大 小 写 十 分 敏感 。 

E XML 标记 由 用 户 自行 定义 ， 但 是 每 一 个 标记 必须 有 结束 标记 。 


2.2.3 ”获取 XML 文档 


获取 XML 文档 的 方法 十 分 简单 。 下 面 通过 一 个 简单 的 Java 代码 获取 2.2.2 节 中 2-2.xml 的 信息 ， 
其 代码 如 下 。 


import java.io.File; 
import org.w3c.dom.Document; 
import org.w3c.dom."*; 
import javax.xml.parsers.DocumentBuilderFactory; 
import javax.xml.parsers.DocumentBuilder; 
import org.xml.sax.SAXException; 
import org.xml.sax.SAXParseException; 
public class ReadAndPrintXMLFile( 
public static void main (String argv[])( 
try ( 
DocumentBuilderFactory docBuilderFactory = DocumentBuilderFactory.newlInstance(); 
DocumentBuilder docBuilder = docBuilderFactory.newDocumentBuilder(); 
Document doc = docBuilder.parse (new File("2-2.xml")); 
doc.getDocumentElement().normalize(); 
System.out println ("Root element of the doc is " + doc.getDocumentElement().getNodeName()); 
NodeList listOfPersons = doc.getElementsByTagName("person"); 
int totalPersons - listOfPersons.getLength(); 
System.out printIn("Total no of people : " + totalPersons); 
for(int s-0; s«listOfPersons.getLength() ; s++}{ 
Node firstPersonNode - listOfPersons.item(s); 
if(firstPersonNode.getNodeType() == Node.ELEMENT NODE) 
Element firstPersonElement = (Element)firstPersonNode; 
NodeList firstNameList = firstPersonElement.getElementsByTagName("first"); 
Element firstNameElement = (Element)firstNameList.item(0); 
NodeList textFNList  firstNameElement.getChildNodes(); 
System.out printin("First Name : " + 
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((Node)textFNList.item(0)).getNodeValue().trim()): 
NodeList lastNameList = firstPersonElement.getElementsByTagNamer("last"); 
Element lastNameElement = (Element)lastNameList.item(0); 
NodeList textL NList = lastNameElement.getChildNodes(); 
System.out.printIn("Last Name : "+ 
((Node)textLNList.item(0)).getNodeValue().trim()); 

NodeList ageList = firstPersonElement.getElementsByTagName("age"); 
Element ageElement = (Element)ageList.item(0); 
NodeList textAgeList - ageElement.getChildNodes(); 
System.out println("Age : " + ((Node)textAgeL ist.item(0)).getNodeValue().trim()); 


$3 
catch (SAXParseException err) 
{ 
System.out.printin ("** Parsing error" + ", line " 
+ err.getLineNumber () + ", uri " + err.getSystemld ()); 
System.out.printIn(" " + err.getMessage ();  ) 
catch (SAXException e) ( 
Exception x 7 e.getException (); 
((x == null) ? e : x).printStackTrace (); 
) 
catch (Throwable t) ( 
t.printStackTrace (); 
) 
) 
) 
在 Java API 中 还 可 以 找到 更 多 操作 XML 文档 的 方法 。 执 行 上 述 代码 后 得 到 如 图 2-17 所 示 的 结果 。 
EAE G Jwe E] EMG 1 R k Bee B8 r--5 


已 终止 》 ReadAndPrintNLFile [Java 应 用 程序 ] C: Vrogrun Files aval jr eb Win Vj avv. exe ( 2009-2-19 


First Name : Bill 
Last Name : Gates 
Age : 46 

First Name : Steve 
Last Name : Jobs 

Ae : 40 


图 2-17 获取 XML 文档 


注意 : XML 文档 其 实 比 HTML 文档 更 简单 ，XML 主 要 用 来 存储 信息 ， 不 负责 显示 在 页 面 。 获 取 XML 文 
档 的 方法 有 很 多 ， 除 Java 语 言 外 ，C#、PHP 和 ASP 等 都 可 调用 ， 也 包括 HIML 语 言 。 


2.3 CSS 技术 基础 


Cu 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 2 章 \CSS 技术 基础 .avi 
CSS 技术 是 Web 网 页 技术 的 重要 组 成 部 分 ， 页 面 通过 CSS 的 修饰 可 以 实现 用 户 需要 的 显示 效果 。 
本 节 将 简要 介绍 CSS 技术 的 基本 知识 ， 并 通过 具体 的 实例 来 介绍 其 具体 的 使 用 流程 ， 为 读者 学 习 本 书 


后 面 的 知识 打下 坚实 的 基础 。 
.9 
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2.3.4 基本 语法 


因为 在 现实 应 用 中 ， 经 常用 到 的 CSS 元 素 是 选择 符 、 属 性 和 值 ， 所 以 ， 在 CSS 的 应 用 语法 中 ， 其 
格式 也 主要 涉及 上 述 3 种 元 素 。CSS 的 基本 语法 结构 如 下 。 


主要 应 用 


<style type="text/css"> 
<i- 

.选择 符 { 属 性 : 值 } 
一 > 


</style> 
其 中 ，CSS 选择 符 的 种 类 有 多 种 ， 并 且 命 名 机 制 也 各 不 相同 。 


Uum 实例 2-1; 演示 CSS 技术 的 用 法 
源码 路 径 : 光盘 :\codes\2\1.html 


文件 1.html 的 具体 实现 代码 如 下 。 


<html> 
<head> 
«meta http-equiv-"Content-Type" content-"text/html; charset=utf-8"> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
E 
.mm ( 
font-family: "Times New Roman", Times, serif; 
font-size: 18px; 
font-weight: bold; 
color: #990000; 
} 
一 > 
</style> 
</head> 
<body class="mm"> 
我 的 未 来 不 是 梦 
</body> 
</html> 


执行 后 的 效果 如 图 2-18 所 示 。 
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<!-- 设 置 的 样式 --> 


REFE 
让 设置 字号 大 小 */ 
让 加 粗 字体 */ 
让 设置 颜色 */ 


<!-- 文 本 调用 样式 --> 


O=- dape ” 


23.2 CSS 属性 介绍 


WEO fe u] DRA R 多 smert 图 局 


RHKETEH 
CSS 属性 是 CSS 中 最 为 重要 的 内 容 之 一 ，CSS 3B 
过 其 本 身 的 属性 实现 对 页 面 元 素 的 修饰 , 从 而 提供 给 用 
户 绚丽 的 效果 。 本 节 将 对 CSS 属性 的 基本 知识 进行 简 
要 介绍 。 B 
在 CSS 中 常用 的 属性 有 如 下 几 类 。 加 本 王国 大 天 三国 和 4 


e. 


2-8 执行 效果 
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1. 字体 属性 
字体 属性 功能 用 于 设置 页 面 字体 的 显示 样式 。 常 用 的 字体 属性 如 表 2-1 所 示 。 
表 2-1 字体 属性 列表 


属 性 描 述 
font-family 设置 使 用 什么 字体 
font-style 设置 字体 的 样式 ， 是 否 斜体 
font-variant 设置 字体 大 小 写 
font-weight 设置 字体 的 粗细 
font-size 设置 字体 的 大 小 


2. 颜色 和 背景 属性 
颜色 和 背景 属性 功能 用 于 设置 页 面 元 素 的 颜色 和 背景 颜色 。 常 用 的 颜色 和 背景 属性 如 表 2-2 所 示 。 
22 颜色 和 背景 属性 列表 


属 性 描 述 
color 设置 元 素 前 景色 
background-color 设置 元 素 背 景色 
background-image 设置 背景 图 案 重 复方 式 
background-repeat 设置 滚动 方式 
background-attachmen 设置 背景 图 案 的 初始 位 置 
background-position 设置 背景 图 案 的 绝对 位 置 
3. 文本 属性 
文本 属性 功能 用 于 设置 页 面 文本 的 显示 效果 。 常 用 的 文本 属性 如 表 2-3 所 示 。 
表 2-3 文本 属性 列表 
m t 描 述 
text-align 设置 文字 的 对 齐 
text-indent 设置 文本 的 首 行 缩 进 
line-height 设置 文本 的 行 高 
a:link 设置 链接 未 访问 过 的 状态 
a:visited 设置 链接 访问 过 的 状态 
a:hover 设置 链接 鼠标 激活 的 状态 
4. 块 属 性 
块 属性 功能 用 于 设置 页 面 内 块 元 素 的 显示 效果 。 常 用 的 块 属性 如 表 2-4 所 示 。 


R24 块 属性 列表 


设置 顶端 填充 距 
设置 右 侧 填充 距 
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5. 边框 属性 
边框 属性 功能 用 于 设置 页 面 内 边框 元 素 的 显示 效果 。 常 用 的 边框 属性 如 表 2-5 所 示 。 
表 2-5 边框 属性 列表 


属 性 描 x 
border-top-width 设置 顶端 边框 宽度 
border-right-width 设置 右 端 边框 宽度 
width 设置 图 文 混 排 的 宽度 属性 
height 设置 图 文 混 排 的 高 度 属性 


6. 项 目 符号 和 编号 属性 
项 目 符号 和 编号 属性 功能 用 于 设置 页 面 内 项 目 符号 和 编号 元 素 的 显示 效果 。 常 用 的 项 目 符号 和 编 


号 属性 如 表 2-6 所 示 。 
表 2-6 项 目 符号 和 编号 属性 列表 
m 性 描 述 
displa; 设置 是 否 显 示 符号 
White-spac 设置 空白 部 分 的 处 理 方式 
7. 层 属性 
层 属性 功能 用 于 设置 页 面 内 层 元 素 的 定位 方式 。 常 用 的 层 属性 如 表 2-7 所 示 。 
表 2-7 层 属 性 列表 
属 性 描 述 
absolute 设置 绝对 定位 
Telative 设置 相对 定位 
static 设置 无 特殊 定位 


2.3.3 CSS 编码 规范 


CSS 的 编码 规范 是 指 在 书写 CSS 代码 时 所 必须 遵循 的 格式 。 按 照 标准 格式 书写 的 CSS 代码 不 但 便 
于 读者 阅读 ， 而 且 有 利于 程序 的 维护 和 调试 。 下 面 对 CSS 样式 的 书写 和 命名 规范 进行 简要 介绍 。 


1. 书写 规范 
按照 Web 标准 的 要 求 ， 标 准 的 Css 书写 规范 应 该 包括 如 下 两 个 方面 。 
(OD 书写 顺序 


最 好 单独 书写 CSS 文件 并 将 其 保存 为 独立 文件 ,尽量 不 要 把 其 书写 在 HTML 页 面 中 。 这 样 做 的 好 
处 是 ， 便 于 CSS 样式 的 统一 管理 和 代码 的 维护 。 
(OD 书写 方式 
在 CSS 中 ， 虽 然 在 不 违反 语法 格式 的 前 提 下 使 用 任何 书写 方式 都 能 被 正确 执行 ， 但 还 是 建议 读者 
在 书写 每 一 个 属性 时 都 使 用 换行 和 缩 进 来 书写 。 这 样 做 的 好 处 是 ， 使 编写 的 程序 一 目 了 然 ， 便 于 程序 


e. 
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的 后 续 维护 。 
2. 命名 规范 


命名 规范 是 指 CSS 元 素 在 命名 时 所 要 遵循 的 规则 。 在 网 页 设计 过 程 中 ， 需 要 定义 大 量 的 选择 符 来 
实现 页 面 表现 。 如 果 没 有 好 的 命名 规范 ， 就 会 导致 页 面 混乱 或 名 称 重复 ， 从 而 造成 额外 的 麻烦 。 所 以 
说 ， 在 命名 CSS 时 应 遵循 一 定 的 规范 ， 使 页 面 结构 达到 最 优化 。 

在 CSS 开发 中 ， 通 常 使 用 的 命名 方式 是 结构 化 命名 方法 。 它 是 相对 于 传统 的 表现 效果 命名 方式 来 
说 的 。 例 如 ， 当 文字 颜色 为 红色 时 ， 使 用 red 来 命名 ; 当 某 页 面 元 素 位 于 页 面 中 间 时 ， 使 用 center 来 命 
名 。 这 种 传统 的 方式 表面 看 来 比较 直观 和 方便 ， 但 是 这 种 方法 不 能 达到 标准 布局 所 要 求 的 页 面 结构 和 
效果 相 分 离 的 要 求 。 所 以 ， 结 构 化 命名 方式 便 结合 了 表现 效果 的 命名 方式 ， 实 现 样 式 命名 。 

常用 页 面 元 素 的 命名 方法 如 表 2-8 所 示 。 

表 2-8 常用 页 面 元 素 的 命名 


页 面 元 素 a K 页 面 元 素 a Hu 
主导 航 mainnav 子 导航 subnav 
页 脚 foot 内 容 content 
头 部 header 底部 footer 
商标 label 标题 title 

顶部 导航 topnav 侧 栏 sidebar 

左 侧 栏 leftsidebar 右 侧 栏 Tightsidebar 
标志 logo 标语 banner 

子 菜单 submenu 注释 note 

容器 container 搜索 search 
登录 logi 管理 admin 


2.4 JavaScript 技术 基础 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 2 3E JavaScript 技术 基础 .avi 

Web 开发 包括 3 部 分 : 内 容 、 样 式 及 行为 。 此 前 的 章节 中 学 习 了 HTML (内 容 ) 和 CSS (样式 ) ， 
而 JavaScript 则 代表 行为 。 在 设计 中 同时 拥有 这 三 者 ， 并 保持 它们 的 相对 独立 是 很 重要 的 。 本 节 将 学 习 
JavaScript 是 什么 ， 以 及 如 何 将 它 加 入 到 Web 页 面 中 ， 同 时 还 会 介绍 一 些 脚本 。 随 后 将 学 习 一 种 名 为 
iQuery 的 JavaScript 框架 , 使 用 它 开发 设计 者 能 够 轻松 地 将 脚本 加 入 页 面 中 , 同时 还 会 介绍 一 些 Query 
脚本 。 最 后 ， 将 介绍 一 种 移动 设备 框架 jQuery Mobile， 但 用 它 开发 设计 者 能 轻松 地 创建 移动 设备 应 用 
程序 的 HTML 文档 。 

JavaScript 是 一 种 脚本 技术 ， 页 面 通过 脚本 程序 可 以 实现 用 户 数据 的 传输 和 动态 交互 。 JavaScript 
是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event Driven) 并 具有 安全 性 能 的 脚本 语言 ,其 目的 是 与 HTML 
超 文本 标记 语言 、Java 脚本 语言 (Java 小 程序 ) 相互 结合 ， 实 现在 Web 页 面 中 链接 多 个 对 象 并 与 Web 
客户 交互 的 效果 ， 从 而 实现 客户 端 应 用 程序 的 开发 。 

© 
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2.4.1 JavaScript 概述 


JavaScript 具体 使 用 的 语法 格式 如 下 。 


«Script Language -"JavaScript" 
JavaScript 脚本 代码 1 
JavaScript 脚本 代码 2 


</Script> 


文件 javascript.html 的 具体 代码 如 下 。 


<html> 

<head> 

«Script Language ="JavaScript"> 
Il JavaScript 开始 


alert(" 这 是 第 一 个 JavaScript 例子 "); /提示 语句 

alert(" 欢 迎 你 进入 JavaScript t1"); /提示 语句 

alert( "今后 我 们 将 共同 学 习 JavaScript 知识 ! "y; /提示 语句 
</Script> 
</Head> 
</Html> 

ET aly 
在 上 述 实例 代码 中 , «Script Language="JavaScript"> | xo SEW mmc WRA oren Ta 
和 </Script> 之 间 的 部 分 是 JavaScript MAGE E r re BI 


的 显示 效果 如 图 2-19 所 示 。 


24.2 JavaScript 运算 符 


A 这 是 第 一 个 Jarascript 例 子 1 


运算 符 是 能 够 完成 某 种 操作 的 一 系列 符号 。 在 
JavaScript 中 常用 的 运算 符 有 算术 运算 符 、 比 较 运 算 符 、 


cwm) 


布尔 逻辑 运算 符 和 字 串 运算 符 。 

JavaScript 中 ， 按 使 用 方式 ， 运 算 符 可 分 为 双 目 运 
算 符 和 单 目 运算 符 两 种 。 其 中 ， 双 目 运算 符 的 语法 格式 。 HEC TITIUS 
如 下 。 图 2-19 显示 效果 图 


操作 数 1 运算 符 操作 数 2 


由 上 述 格式 可 以 看 出 ， 双 目 运算 符 由 两 个 操作 数 和 一 个 运算 符 组 成 。 例 如 ，50+40 和 "This"+"that" 
等 。 而 单 目 运算 符 只 有 一 个 操作 数 ， 并 且 其 运算 符 可 在 前 或 后 。 


1. 算术 运算 符 
JavaScript 中 的 算术 运算 符 分 单 目 运算 符 和 双 目 运算 符 两 种 。 常 用 的 双 目 运算 符 如 表 2-9 所 示 。 


e. 


第 2 章 Android 网 络 开发 技术 基础 


表 2-9 常用 双 目 运算 符 列表 


元 — X 描 述 元 — X 描 述 
+ 表示 加 表示 减 
* 表示 乘 / 表示 除 
| 表示 按 位 或 & 表示 按 位 与 
< 表示 左 移 > 表示 右 移 
>>> 表示 零 填充 % 表示 取 模 


JavaScript 中 常用 的 单 目 运算 符 如 表 2-10 所 示 。 
表 2-10 常用 单 目 运算 符 列表 


x * 描 述 元 素 ioo xk 
E 表示 取 反 - 表示 取 补 
+ 表示 递 加 1 = 表示 递减 1 

2. 比较 运算 符 


JavaScript 中 比较 运算 符 的 基本 操作 过 程 是 : 对 操作 对 象 进行 比较 ， 然 后 返回 一 个 true 或 false 值 
来 表示 比较 结果 。 
JavaScript 中 常用 的 比较 运算 符 如 表 2-11 所 示 。 
表 2-11 比较 运算 符 列表 
元 素 à, Boo 

< | mM | > | 表示 大 于 

一 | cGe2T | > | 表示 大 于 等 于 

= | ast | = | 表示 不 等 于 


3. 布尔 逻辑 运算 符 
JavaScript 中 常用 的 布尔 逻辑 运算 符 如 表 2-12 所 示 。 
32-12 布尔 逻辑 运算 符 列表 


Hood H g 
! | 表示 取 反 &- | 表示 取 与 之 后 赋值 
& | 表示 逻辑 与 E | 表示 取 或 之 后 赋值 
| | 表示 逻辑 或 ~= | 表示 取 异 或 之 后 赋值 
^ | 表示 逻辑 异 或 | 表示 三 目 操作 符 
| 表示 或 | 表示 等 于 


表示 不 等 于 
其 中 ， 三 目 操作 符 具 体 使 用 的 语法 格式 如 下 。 

操作 数 ? 结果 人 结果 2 

如 果 操 作 数 的 结果 为 真 ， 则 表述 式 的 结果 为 “结果 1”， 否 则 为 “结果 2”。 
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24.3 JavaScript 循环 语句 

JavaScript 程序 是 由 若干 语句 组 成 的 ， 循 环 语句 是 编写 程序 的 指令 。JavaScript 提供 了 完整 的 基本 
编程 语句 ， 本 节 将 对 常用 的 JavaScript 循环 语句 知识 进行 简要 介绍 。 

1. if 条 件 语句 

if 条 件 语句 的 功能 是 根据 系统 用 户 的 输入 值 作 出 不 同 的 反应 提示 。 例 如 ， 可 以 编写 一 段 特 定 程序 
实现 对 不 同 输入 文本 的 反应 。 让 条 件 语句 的 语法 格式 如 下 。 

if 表 述 式 ) 

语句 段 1; 

else 

语句 段 2; 

if...else 语句 是 JavaScript 中 最 基本 的 控制 语句 ， 通 过 它 可 以 改变 语句 的 执行 顺序 。 在 其 表达 式 中 
必须 使 用 关系 语句 来 实现 判断 ， 并 且 作 为 一 个 布尔 值 来 估算 。 若 if 后 的 语句 有 多 行 ， 则 必须 使 用 花 括 


号 将 其 括 起 来 。 
另外 ， 通 过 让 条 件 语句 可 以 实现 条 件 的 嵌 套 处 理 。 计 语句 的 嵌 套 语法 格式 如 下 。 
汶 布 尔 值 ) 语 名 1; 
else( 布 尔 值 ) 语 句 2; 


else if( 布 尔 值 ) 语 名 3; 

else 语句 4; 

在 上 述 格式 下 ， 每 一 级 的 布尔 表述 式 都 会 被 计算 。 若 为 真 ， 则 执行 其 相应 的 语句 ， 若 为 假 ， 则 执 
行 else 后 的 语句 。 

2. for 循环 语句 

for 循环 语句 的 功能 是 实现 条 件 循环 ， 当 条 件 成 立时 执行 特定 语句 集 ， 否 则 将 跳出 循环 。for 循环 
语句 的 语法 格式 如 下 。 

for( 初 始 化 ;条 件 ; 增 量 ) 

语句 集 ; 

其 中 ，“ 条 件 ” 是 用 于 判别 循环 停止 的 条 件 。 若 条 件 满足 ， 则 执行 循环 体 ， 否 则 将 跳出 。“ 增 量 ” 
用 来 定义 循环 控制 变量 在 每 次 循环 时 按 什 么 方式 变化 。3 个 主要 语句 之 间 必 须 使 用 逗号 分 隔 。 

3. while 循环 语句 

while 循环 语句 与 for 语句 一 样 ， 当 条 件 为 真 时 则 重复 循环 ， 和 否则 将 退出 循环 。while 循环 语句 的 语 
法 格式 如 下 。 


while( 条 件 ) 
语句 集 ; 


e. 
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4. do...while 循环 语句 


do...while 的 中 文 解释 是 “执行 …… 当 …… 继 续 执行 ”。 在 “执行 (do) ”后 面 跟随 命令 语句 ， 在 
“ 当 〈while) ”后 跟随 一 组 判断 表达 式 。 如 果 判 断 表 达 式 的 结果 为 真 ， 则 执行 后 面 的 程序 代码 。 

do...while 循环 语句 的 语法 格式 如 下 。 

do{ 

< 程序 语句 区 > 
H 

while(< 逻 辑 判断 表达 式 >) 

5. break 控制 

break 控制 的 功能 是 终止 某 循环 结构 的 执行 。 通 常 将 break 放 在 某 循环 语句 的 后 面 ， 其 语法 格式 
如 下 。 

循环 语句 

break 

例如 ， 下 面 的 一 段 语 


<script> 

a=new array(5,4,3,2,1); /数组 初始 值 

sum=0 // 变 量 初始 值 
for(i=0,i<a.length;++i) /小 于 数组 长 度 则 变量 递增 


if (i==3 ) break; /变量 为 3 则 停止 
sum+=ali] 


</script> 


在 上 述 代 码 中 ，for 语句 在 i 等 于 0、1、2、3 时 执行 。 当 i 等 于 3 时 ， 认 条件 为 真 ， 执 行 break 语 
使 for 语句 立刻 终止 。 所 以 ，for 语句 终止 时 的 sum 值 是 12。 


6. switch 循环 语句 


switch 的 中 文 解释 是 “切换 ”， 其 功能 是 根据 不 同 的 变量 值 来 执行 对 应 的 程序 代码 。 如 果 判 断 表 
达 式 的 结果 为 真 ， 则 执行 后 面 的 程序 代码 。 
switch 语句 的 语法 格式 如 下 。 
switch <E E>) 
case< 特 定数 值 1>: 程 序 语句 区 ; 
break; 
case< 特 定数 值 2>: 程 序 语句 区 ; 
break; 


E! 


case< 特 定数 值 n>: 程 序 语句 区 ; 
break; 
default :程序 语句 区 ; 
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HH, default 语句 是 可 以 省 略 的 。 省 略 后 ， 当 所 有 的 case 都 不 符合 条 件 时 ， 便 退出 switch 语句 。 
2.4.4 JavaScript 函数 


函数 为 程序 设计 人 员 提供 了 一 个 功能 强大 的 处 理 功 能 。 通 常 在 进行 一 个 复杂 的 程序 设计 时 ， 总 是 
根据 所 要 完成 的 功能 ， 将 程序 划分 为 一 些 相 对 独立 的 部 分 ， 每 部 分 编写 一 个 函数 ， 从 而 使 各 部 分 充分 
独立 ， 任 务 单 一 ， 程 序 清 晰 、 易 懂 、 易 维护 。JavaScript 函数 可 以 封装 程序 中 多 次 用 到 的 模块 ， 将 其 作 
为 事件 驱动 的 结果 进行 调用 ， 从 而 实现 一 个 函数 ， 把 它 与 事件 驱动 相关 联 。 

本 节 将 简要 介绍 JavaScript 函数 的 基本 知识 ， 并 通过 几 个 简单 的 实例 来 介绍 其 使 用 方法 。 

1. 函数 的 构成 


JavaScript 函数 由 如 下 部 分 构成 。 

关键 字 : function. 

函数 或 变量 。 

函数 的 参数 ， 用 小 括号 “( )” 括 起 来 。 如 果 有 多 个 ， 则 用 逗号 “,” 分 开 。 
函数 的 内 容 : 通常 由 一 些 表 达 式 构成 ， 外 面 用 花 括号 “{ }” 括 起 来 。 
关键 字 : retume 

其 中 ， 参 数 和 return 不 是 构成 函数 的 必要 条 件 。 


2. JavaScript 常用 函数 


dip qu ideae bc 

编码 函数 : 即 函数 escape0， 功 能 是 将 字符 串 中 的 非 文字 和 数字 字符 转换 成 ASCI 值 。 
译 码 函数 : 即 函数 unescape0， 和 编码 函数 完全 相反 ， 功 能 是 将 ASCII 字符 转换 成 一 般 数字 。 
求 值 函数 : 即 函数 eval0, 有 两 个 功能 , 一 是 进行 字符 串 的 运算 处 理 , 二 是 用 来 指出 操作 对 象 。 
数值 判断 函数 : 即 函数 isNan0， 功 能 是 判断 自 变量 参数 是 不 是 数值 。 

转 整数 函数 : 即 函数 parseInt0， 功 能 是 将 不 同 进 制 的 数值 转换 成 以 十 进 制 表示 的 整数 值 。 
parseIntO 有 具体 使 用 的 语法 格式 如 下 。 

parselnt( 字 符 串 [, 底 数 ]) 


通过 上 述 格式 可 以 将 其 他 进 制 数值 转 换 成 为 十 进 制 。 如 果 在 执行 过 程 中 遇 到 非法 字符 ， 则 立即 停 
止 执行 ， 并 返回 已 执行 处 理 后 的 值 。 
回 ” 转 浮 点 函数 : 即 函数 parseFloat0， 功 能 是 将 指定 字符 串 转换 成 浮 点 数值 。 如 果 在 执行 过 程 中 
遇 到 非法 字符 ， 则 立即 停止 执行 ， 并 返回 已 执行 处 理 后 的 值 。 


RARARA 


回回 回回 加 


实例 2-3: 演示 求 值 函数 eval0 的 基本 用 法 
源码 路 径 : 光盘 :\codes\2\10bhtml 


«style type="text/css"> 


e. 
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gz 
body { 
background-color: #9966CC; 让 设置 背景 颜色 */ 
2: 
</style> 
</head> 
<body> 
<Script> 
mm=1+2; /| 变量 初始 值 
zz=eval("1+2"); IRBA 
document.write("142-" zz); // 输 出 结果 
</Script> 


</body> 
</html> 
在 上 述 代码 中 ， 通 过 函数 eval0 计 算出 了 “1+2” 的 和 ， 执 行 后 的 效果 如 图 2-20 所 示 。 
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图 2-20 显示 效果 图 


JavaScript 中 有 许多 小 窍门 ， 可 以 使 编程 更 加 容易 。 其 中 之 一 就 是 使 用 eval0 函 数 ， 该 函数 可 以 把 
一 个 字符 串 当 作 一 个 JavaScript 表达 式 去 执行 。 如 下 面 的 代码 。 

var the_unevaled_answer = "2 + 3"; 

var the_evaled_answer = eval("2 + 3"); 

alert("the un-evaled answer is " + the unevaled answer + " and the evaled answer is " + the evaled answer); 

运行 上 述 程序 , 将 会 看 到 在 JavaScript 中 字符 串 "2+3" 实 际 上 被 执行 了 。 所 以 当 把 the_evaled_answer 
的 值 设 成 eval("2+3") 时 ，JavaScript 将 会 把 2 和 3 的 和 返回 给 the evaled answer. 

利用 该 功能 可 以 做 出 很 有 趣 的 事 ， 如 使 用 eval0 可 以 根据 用 户 的 输入 直接 创建 函数 。 这 可 以 使 程序 
根据 时 间或 用 户 输入 的 不 同 而 发 生变 化 ， 举 一 反 三 ， 可 以 获得 惊人 的 效果 。 


2.4.5 JavaScript 事件 
用 户 对 浏览 器 所 进行 的 某 种 动作 称 为 事件 。 在 JavaScript 中 ， 通 常 鼠 标 或 热 键 的 动作 被 称 为 事件 


(Event) ， 由 鼠标 或 热 键 引发 一 连 串 程序 的 动作 被 称 为 事件 驱动 (Event Driver) ， 对 事件 进行 处 理 的 
程序 或 函数 被 称 为 事件 处 理 程序 (Event Handler) 。 本 节 将 对 JavaScript 事件 的 基本 知识 进行 简要 介绍 。 


© 
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1. JavaScript 中 的 常用 事件 


在 JavaScript 中 有 如 下 几 种 常用 的 事件 。 

事件 Abort: 功能 是 在 对 象 未 完全 加 载 前 将 其 终止 。 适 用 于 image 对 象 。 

事件 Blur: 功能 是 将 用 户 的 输入 焦点 从 窗口 或 表单 上 移 开 。 适 用 于 Window 及 所 有 表单 子 组 件 。 
事件 Change: 功能 是 将 用 户 的 组 件 值 进行 修改 处 理 。 适 用 于 text、password 和 select。 

事件 Click: 功能 是 在 某 对 象 上 单 击 一 下 鼠标 左 键 。 适 用 于 link 及 所 有 表单 子 组 件 。 

事件 DblClick: 功能 是 在 某 对 象 上 连续 双击 鼠标 。 适 用 于 link 及 所 有 表单 子 组 件 。 

事件 DrogDrop: 功能 是 用 鼠标 左 键 将 对 象 拖 动 至 窗口 内 。 适 用 于 Window 对 象 。 

事件 Error: 功能 是 加 载 文件 或 图 像 时 发 生 错误 。 适 用 于 Window 和 image 对 象 。 

事件 Focus: 功能 是 将 输入 焦点 或 光标 放 到 指定 对 象 内 。 适 用 于 Window 及 所 有 表单 子 组 件 。 
事件 KeyDown: 功能 是 响应 用 户 按 下 键盘 任 一 按键 的 一 去 那 。 适 用 于 image. link 及 所 有 表 
单子 组 件 。 

事件 KeyPress: 功能 是 响应 用 户 按 下 键盘 任 一 按键 后 , 按键 弹 起 的 一 去 那 。 适用 于 image. link 
及 所 有 表单 子 组 件 。 

事件 Load: 功能 是 响应 浏览 器 读 入 该 文件 时 。 适 用 于 document 对 象 。 

事件 MouseDown: 功能 是 响应 用 户 单 击 鼠 标 时 。 适 用 于 document. link 及 所 有 表单 子 组 件 。 
事件 MouseMove: 功能 是 响应 用 户 移动 鼠标 光标 时 。 适 用 于 document、link 及 所 有 表单 子 组 件 。 
事件 MouseOut: 功能 是 响应 用 户 将 鼠标 光标 离开 某 对 象 时 。 适 用 于 document, link 及 所 有 表 
单子 组 件 。 

事件 MouseOver: 功能 是 响应 用 户 将 鼠标 光标 移动 到 某 对 象 上 时 。 适 用 于 document. link 及 
所 有 表单 子 组 件 。 

事件 MouseUp: 功能 是 响应 用 户 将 鼠标 左 键 放 开 时 。 适 用 于 document. link. 及 所 有 表单 子 
组 件 。 

E] 事件 Move: 功能 是 响应 用 户 或 程序 移动 窗口 时 。 适 用 于 Window 对 象 。 

B FHF Reset: 功能 是 响应 用 户 单 击 表单 中 的 Reset 按钮 时 。 适 用 于 form 对 象 。 

B FHF Resize: 功能 是 调整 窗口 的 大 小 尺寸 。 适 用 于 Window 对 象 。 

E] 事件 Select: 功能 是 响应 用 户 选取 某 对 象 时 。 适 用 于 text, password 和 select. 

回 
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事件 Submit: 功能 是 响应 用 户 单 击 表单 中 Submit 按钮 时 。 适 用 于 form。 
事件 Unload: 功能 是 关闭 或 退出 当前 页 面 。 适 用 于 document。 


事件 处 理 程序 


所 谓 事件 处 理 程 序 ， 是 指 当 一 个 事件 发 生 后 要 做 什么 处 理 。 在 前 面 介绍 的 20 多 种 事件 中 ， 每 一 种 
都 有 其 专用 的 事件 处 理 过 程 的 定义 方式 。 例如, 事件 Load 的 事件 处 理 程序 是 OnLoad; 同样 , 事件 Click 
的 事件 处 理 程序 是 OnClick。 

在 现实 应 用 中 ， 通 常 将 处 理 程序 直接 嵌入 到 HTML 标记 内 。 


区 实例 24: 演示 事件 处 理 程序 的 基本 用 法 
源码 路 径 : 光盘 :\codes2\11 html 


实例 文件 11.html 的 功能 是 在 页 面 载 入 时 输出 提示 语句 ， 其 主要 实现 代码 如 下 。 
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<style type="text/css"> 


< 


body ( 
background-color: #9966CC; 让 设置 背景 颜色 */ 


<body onLoad='alert(" 你 确定 要 访问 此 页 吗 ?里 面 可 能 含有 非法 信息 山 )> / 载 入 提示 信息 
</body> 

</html> 

上 述 实 例 页 面 一 旦 载 入 ， 便 显示 提示 信息 ， 具 体 效 果 如 图 2-21 所 示 。 
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图 2-21 显示 效果 图 


事件 处 理 是 对 象 化 编程 的 一 个 很 重要 的 环节 ， 没 有 了 事件 处 理 ， 程 序 就 会 变 得 很 死 ， 缺 乏 灵活 性 。 
事件 处 理 的 过 程 可 以 这 样 表示 : 发 生 事件 一 启动 事件 处 理 程序 一 事件 处 理 程序 作出 反应 。 其 中 ， 要 使 
事件 处 理 程序 能 够 启动 ， 必 须 先 告诉 对 象 发 生 什 么 事情 就 启动 什么 处 理 程序 ， 否 则 这 个 流程 就 不 能 进 
行 下 去 。 事 件 的 处 理 程序 可 以 是 任意 JavaScript 语句 ,但 是 一 般 用 特定 的 自 定义 函数 (function) 来 处 
理事 情 。 

有 如 下 3 种 方法 可 以 指定 事件 处 理 程序 。 

ED HE HTML 标记 中 指定 。 

编写 特定 对 象 特定 事件 的 JavaScript。 这 种 方法 用 得 比较 少 ， 但 在 某 些 场合 中 很 好 用 。 

在 JavaScript 中 说 明 。 


2.4.6 ”常用 的 Web 页 面 脚本 


在 现实 应 用 中 ， 最 常用 的 Web 页 面 脚本 有 以 下 几 个 。 
回 ”鼠标 滑 入 效果 (rollover)。 

H RER Xİ (verifying form data). 

加 ”打开 新 窗口 (opening new windows). 

E] BE Cookie (setting Cookie). 


E 
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1. 创建 rollover 


rollover 是 一 种 很 好 的 与 用 户 互动 的 方法 ， 能 够 提高 页 面 互动 性 ， 且 不 会 给 看 不 见 JavaScript 的 用 
户 带 来 负面 影响 。 创 建 rollover 最 简单 的 方法 是 用 CSS 定制 链接 样式 ， 而 不 是 使 用 JavaScript。 使 用 
CSS 定制 链接 样式 时 ， 只 需要 为 原 链接 及 rollover 状态 加 入 不 同 的 样式 。 例 如 : 

a:link ( color: blue; ) 

a:hover ( color: purple; ) 

创建 的 链接 本 身 是 蓝 色 ， 而 当 鼠 标 指针 停留 在 链接 上 时 ， 颜 色 变 为 紫色 。 

在 现实 应 用 中 ，rollover 不 适合 用 在 移动 设备 中 。 因 为 在 智能 手机 及 平板 电脑 上 无 法 “将 鼠标 指针 
移动 到 链接 ”上 ， 而 只 能 通过 点 击 的 方法 实现 。 如 果 想 实现 鼠标 指针 移动 到 链接 上 时 显示 弹出 框 效 果 ， 
移动 手机 用 户 也 无 法 看 到 。 

2. 表单 数据 验证 


开发 者 总 是 需要 确认 用 户 是 否 正确 填写 了 网 站 上 的 表单 ， 这 种 确认 行为 被 称 为 表单 验证 。 通 常会 
在 使 用 JavaScript 将 表单 数据 传送 至 服务 器 前 进行 验证 。 此 处 需要 注意 的 是 ， 使 用 JavaScript 进行 的 表 
单数 据 验证 很 容易 被 规避 。 人 们 可 以 通过 关闭 JavaScript 来 规避 验证 ， 在 提交 表单 后 再 将 它 打 开 。 如 果 
提交 正确 数据 是 必需 的 ， 开 发 者 应 当 在 服务 器 上 也 进行 验证 。 

读者 可 以 在 网 上 找到 许多 现成 的 用 于 各 种 类 型 表单 数据 验证 的 脚本 ， 只 要 在 搜索 引擎 上 搜索 form 
validation. (表单 验证 ) 便 可 以 找到 。 


3. 打开 新 窗口 


利用 JavaScript 在 新 窗口 中 打开 广告 的 应 用 在 网 络 中 很 普遍 。 尽 管 这 种 做 法 很 麻烦 ， 但 在 Web 应 
用 程序 上 可 以 用 它 来 显示 其 他 信息 或 查询 数据 。 

使 用 JavaScript 打开 新 窗口 最 简单 的 做 法 是 使 用 内 置 函数 window.open0。 例 如 ， 要 在 http://www. 
sohu.com/ 上 打开 一 个 名 为 test 的 窗口 ， 可 以 写 为 : 

window.open('http://www.sohu.com/",'test'); 

而 下 面 的 代码 会 关闭 一 个 打开 的 窗口 。 

window.close(); 

不 能 在 窗口 外 部 关闭 该 窗口 。 

4. Cookies 的 设置 及 读 取 

Cookies 是 本 地 计算 机 上 存储 的 一 小 块 数据 。 Web 开发 者 利用 它们 在 本 地 计算 机 上 存储 网 站 的 离线 
数据 。 数 据 种 类 很 多 ， 从 登录 证 书 到 游戏 信息 等 无 所 不 有 。 JavaScript 可 以 让 Cookies 的 设置 、 读 取 及 
删除 变 得 简单 。 


Cookies 被 保存 为 name=value pairs， 具 有 有 效 期 和 路 径 〈 服 务 器 端 允许 读 取 的 路 径 ) 。 例 如 ， 下 
面 是 一 个 使 用 JavaScript 书写 的 cookie。 


document.cookie = 'name-value; expires=Day, dd Mon yyyy hh:mm:ss UTC; path=/ 


e. 
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当 读 取 cookie 时 , 将 document.cookie 作为 字符 串 读 取 , 并 解析 它 的 等 号 或 分 号 。 使 用 分 号 将 cookie 
分 隔 ， 会 更 容易 理解 name=value pairs。 删 除 cookie 时 ， 只 需要 将 cookie 的 value 设置 为 1 即 可 。 

下 面 的 代码 用 来 创建 /设置 、 读 取 及 删除 cookie 的 函数 。 

第 一 个 函数 用 于 创建 /设置 cookie。 


function createCookie(name,value,expireDays) { 

if (expireDays) { 
var date = new Date(); 
date.setTime(date.getTime()*(expireDays*24*60*60*1000)); 
var expires = "; expires-"date.toGMTsString(); 

} 

else var expires = ""; 

document.cookie = name+"="+value+expires+"; path=/"; 


) 
第 二 个 函数 用 来 读 取 cookie. 


function readCookie(cookieName){ 
var name = cookieName + "="; 
var ca = document.cookie.split('"); 
for(var i-0;i < ca.length;i++) ( 
var c = cafi]; 
while (c.charAt(0)--' ') c = c.substring(1,c.length); 
if (c.indexOf(name) == 0) return c.substring(name.length,c.length ); 
} 
return null; 


) 
第 三 个 函数 用 来 删除 cookie. 


function eraseCookie(cookieName) { 
createCookie(cookieName,"" .-1); 
) 


2.5 Æ Android 设备 测试 网 页 
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开发 人 员 都 很 希望 用 HTML. CSS 和 JavaScript 技术 来 构建 适应 于 Android 系统 的 应 用 程序 。 这 个 
旅程 的 第 一 步 是 为 HTML 添加 有 亲和力 的 样式 ， 使 它们 更 像 移 动 应 用 程序 。 在 实现 这 个 功能 时 ， 需 要 
将 CSS 样式 应 用 到 传统 的 HTML 网 页 上 ， 让 它们 在 Android 手机 上 也 能 正常 浏览 ， 并 且 很 容易 浏览 。 

搭建 开发 环境 比较 简单 ,只 需要 有 一 个 网 络 空间 即 可 .将 做 好 的 网 页 上 传 到 空间 中 , 然后 保证 在 Android 
模拟 器 中 可 以 上 网 浏览 这 个 网 页 即 可 。 很 多 网 站 都 提供 了 免费 空间 服务 ， 如 http://www.3v.cm/。 申 请 
免费 空间 的 基本 流程 如 下 。 

(1) 登录 http://www.3v.cm/， 如 图 2-22 所 示 。 
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2-02 ”登录 http://www.3v.cm/ 
(2) 单 击 左 侧 的 “注册 ”按钮 ， 进 入 服务 条 款 界 面 ， 如 图 2-23 所 示 。 
| 第 一 步 : J 济世 网 过 服务 条 款 
欢迎 您 申请 使 用 三 推 免费 个 人 主页 空间 服务 ， 为 维护 网 上 公共 和 序 和 社会 稳定 ， 请 您 自 这 遵守 以 下 条 款 : 


一 、 不 但 利用 本 站 危害 国家 安全 、 测 肛 国 家 秘密 ， 不 得 侵犯 国家 社会 集体 的 和 公民 的 合法 权益 ， 不 得 利用 本 站 制作 、 复 制 和 传播 下 列 信 
息 : 


【一 ) 煽动 抗拒 、 磁 坏 完 法 和 法 健 、 行 政法 规 实施 的 ; 

煽动 靖 枝 国家 政权 ,推翻 社会 主义 制度 的 

护 动 分 裂 国家 、 破 杯 国家 统一 的 ; 

四 ) 煽动 民族 仇恨 、 民 族 岐 视 ， 破坏 民族 团结 的 

CR) 提 造 或 者 焉 曲 事实 ， 数 布 请 言 ， 扰 乱 社 会 身 序 的 

CA) EHSEBESHR. ipf. Gd. Wu. Mos. DUE. Dh. Borm: 
(七 222BRE HA RECIEHEA S GC AL , SERIE CTOCHUSREOR ERO ; 
OV IBEBUREUS RERO ; 

CA) 其 他 违反 完 法 和 法 律 行政 法 规 的 ; 


二 、 互 相 苯 重 ， 对 自己 的 言论 和 行为 负责 。 


BE] m| 


图 2-23 同意 条 款 界面 
(3) 单 击 “ 我 同意 ”按钮 后 ， 进 入 填写 用 户 名 界面 ， 如 图 2-24 所 示 。 
[第 二 步 : || msmPS. sasu 


APZ: | —— . ”检测 用 户 各 | (请 使 用 3-12 个 英文 宇 母 或 数字 或 -， 可 任意 组 合 ) 
SARN: | 免费 空间 -100N 一 | 。-> 控 此 查看 所 法 宝 间 详 细 参 数 


T-E 
图 2-24 填写 用 户 名 界面 
(D 填写 完毕 后 ， 单 击 “ 下 一 步 ” 按 钮 ， 在 填写 信息 界面 填写 注册 信息 ， 如 图 2-25 所 示 。 
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图 2-25 ”填写 注册 信息 界面 


C50 填写 完毕 后 ， 单 击 “ 递 交 ” 按 钮 ， 完 成 注册 。 在 注册 中 心 界面 可 以 管理 自己 的 空间 ， 如 图 2-26 


所 示 。 


所 示 。 


| 控制 面板 | guanxijing ,欢迎 登录 会 员 中 心 ， 今 天 是 : 2011 年 10 月 12 日 星期 三 
收费 空间 30 [2010-7-30 15:33:21] 帮助 : 免费 空间 如 何 上 传 文件 
帐户 信息 虚拟 主机 控制 面板 
umen 您 可 以 自由 操作 您 的 虚拟 主机 
zasa 
Shut 用 户 各 : quenxi jing 
我 的 推荐 帐户 金明 : MR: vox MR: vox 
qut PRA: MR: 0 点 MR: 0 点 

APRI: ARAP RUSCRRP HERDIN 
das saam: zaza 
swe sast: 1008 
nnm 注册 日 期 : 2011-10-12 
TEE emu: IRM 
l maea: 3 
AALE Hrama : 2011-10-12 19:17:35 
p EH 124.128. 128.52 
R 网 站 名 称 : 1223 
网 站 域名 : http:J/enanxijine ISfree. net 
付费 确认 
则 各 记录 
退出 登录 


226 用 户 中 心 界面 


C6) 单 击 左 侧 的 “FTP 管理 ” 链接， 可 以 更 改 FTP 密码 ,并 且 可 以 查看 空间 的 TP 地 址 ， 如 图 2-27 
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FTP 服务 器 : 221.1.217.92 


用 户 名 : maxijing 


密码 安全 性 : 
新 密码 : | ” Ehe 
RUSH: * 


227 FTP 管理 


根据 图 2-27 中 的 资料 ， 可 以 用 专业 上 传 工 具 上 传 编写 的 程序 文件 。 
CD 单 击 左 侧 的 “文件 管理 ”链接 ， 在 弹出 的 界面 中 可 以 在 线 管理 空间 中 的 文件 ， 如 图 2-28 所 示 。 


当前 位 置 : |/manxijine/ Meez: | Lil 
全 选 目录 | 取消 选择 | 新 建 目录 | 。 全 选 文件 | 取消 选择 | rex 
B 9 个 文件 , 320 个 /页 第 ! 页 共 ! 页 上 一 页 下 一 页 sese [1 国 
T^ C) images 改名 P FI [Il 大 小 Bm 
KiTER 33] ms store DS STORE 文件 编辑 改名 HE 路 径 600KB 2011-10-12 18:44:20 
M) uas js Jseript seript 文件 GRB 改名 BER 路 径 。 70.48 KB 2011-10-12 16:44:18 
@ saa pne [5 nmm Rii 改 名 MR RBE TDI 2011-10-12 19:06:40 


r 
r 

r 

DO wndroid css RAUS RHONE MPR 路径。 161KB 2011-10-12 18:44:15 
D G ww js Jseript seript 文件 ROSE MER BBE 369 FP 2011-10-12 18:44:14 
r Uh jpe [> re me Rii 改名 MR BE 45209 2010-9-17 8:12:46 
M S desktop. css ERREN REIZ M 路 径 139 FP 2011-10-12 18:44:13 
M oS porer css BARRAIS MERE MR BE 201 FP 2011-10-12 18:44:12 
I^ 到 index htal mL Docment OE 改名 MR B 226KB 2011-10-12 18:43:51 

SAER: : 100M ,已 用 空间 : 10173 KB, 当前 目录 : 共 9 个 文件 , 约 92.47 B 


免费 空间 版 权 所 有 2004-2005. All Rights Reserved weleasterü3vi deo. cn. 


图 2-28 文件 管理 


单 击 图 2-28 中 每 一 个 文件 的 “路 径 ” 超 链接 ， 可 以 获取 该 文件 的 URL 地址， 这 样 在 Android 手机 
中 就 可 以 用 这 个 URL 来 访问 此 文件 ， 并 查看 此 文件 在 Android 手机 中 的 执行 效果 。 


2.6 编写 第 一 个 网 页 


G 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 2 章 \ 编 写 第 一 个 网 页 .avi 
下 面 以 一 个 具体 例子 来 作为 开始 ， 详 细 讲 解 在 Android 平台 中 使 用 HTML+CSS+JavaScript 设计 一 
个 网 页 的 基本 知识 ， 并 讲解 在 Android 设备 中 调试 运行 网 页 的 具体 方法 。 


2.6.1 编写 HTML 文件 


假设 有 一 个 很 好 的 网 页 ， 己 被 用 户 浏览 过 多 次 ， 其 中 主页 文件 index.html 的 源 代码 如 下 。 


[ON 
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<html> 
<head> 
<title>aaa</title> 
<link rel="stylesheet" href="desktop.css" type="text/css" /> 
<body> 
<div id="container"> 
<div id="header"> 
<h1><a href="./"> 好 东西 要 分 享 </a></h1> 
<div id="utility"> 
<ul> 
<li><a href="about.html"> 关 于 我 们 </a></li> 
<li><a href="blog.html"> 博 客 </a></li> 
<li><a href="contact.htmI"> 联 系 我 们 </a></li> 
«Iul» 
</div> 
«div id="nav"> 
«ul» 
<li><a href="bbb.htmI"> 发 邮件 吧 </a></li> 
<li><a href="ccc.htmI"> 电 话 支 持 </a></li> 
<li><a href="ddd.htmI"> 在 线 客服 </a></li> 
<li><a href="http://www.aaa.com"> 在 线 视频 </a></li> 
«Iul» 
</div> 
</div> 
«div id="content"> 
<h2> 关 于 我 们 </h2> 
<p> 这 是 一 个 学 习 的 网 站 ， 也 是 一 个 交流 的 网 站 .…..</p> 
</div> 
<div id="sidebar"> 
<img alt=" 好 图 片 " src="aaa.png"> 
<p> 这 是 一 个 学 习 的 网 站 ， 也 是 一 个 交流 的 网 站 .…..</p> 
</div> 
«div id="footer"> 
«ul» 
<li><a href-"bbb.html"» BR 3 «/a» «/li»- 
<li><a href="ccc.html"> 关 于 我 们 </a></li> 
<li><a href="ddd.htmI"> 博 客 </a></li> 
«Iul» 
«p class="subtle"> 世 界 第 一 </p> 
</div> 
</div> 
</body> 
</html> 


根据 “样式 和 表现 相 分 离 ” 的 原则 ， 需 要 单独 写 一 个 CSS 文件 ， 通 过 这 个 CSS 文件 对 上 述 网 页 进 
行 修饰 ， 修 饰 的 最 终 目 的 是 使 其 能 够 在 Android 手机 上 浏览 。 


注意 : 在 现实 开发 应 用 中 ， 最 好 将 桌面 浏览 器 的 样式 表 和 Android 样 式 表 划 清 界限 。 笔 者 感觉 ， 写 两 个 


K^ 
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完全 独立 的 文件 会 舒服 很 多 。 当 然 也 可 以 把 所 有 的 CSS 规 则 放 到 一 个 单一 的 样式 表 中 ， 但 是 这 
种 做 法 不 值得 提倡 ， 原 因 有 二 : 
文件 太 长 就 显得 麻烦 ， 不 利于 维护 。 
把 太 多 不 相关 的 桌面 样式 规则 发 送 到 手机 上 ， 会 浪费 一 些 宝贵 的 带宽 和 存储 空间 。 
开始 写 CSS 文件 ， 为 了 适应 Android 系统 ， 写 下 面 的 link 标签 。 
«link rel="stylesheet" type-"text/css" 
href-"android.css" media-"only screen and (max-width: 480px)" /> 


«link rel="stylesheet" type="text/css" 
href="desktop.css" media="screen and (min-width: 481px)" /> 


在 上 述 代码 中 ， 最 明显 的 变动 是 浏览 器 宽度 的 变化 ， 即 : 

max-width: 480px 

min-width: 481px 

这 是 因为 手机 屏幕 的 宽度 和 计算 机 屏幕 的 宽度 是 不 一 样 的 (当然 长 度 也 不 一 样 ， 但 是 都 具有 下 拉 
功能 ) , 480px 是 Android 系统 的 标准 宽度 ， 我们 删除 代码 的 功能 是 不 管 浏览 器 的 窗口 有 和 多大， 桌面 用 
户 看 到 的 都 是 文件 desktop.css 样式 修饰 的 页 面 ， 宽 度 都 是 用 如 下 代码 设置 的 宽度 。 


max-width: 480px 
min-width: 481px 


上 述 代码 中 有 两 个 CSS 文件 ， 一 个 是 desktop.css， 此 文件 是 开发 计算 机 页 面 时 编写 的 样式 文件 ， 
H HTML 页 面 服务 。 而 文件 android.css 是 一 个 新 文件 ， 也 是 将 要 讲解 的 重点 。 通 过 android.css， 可 以 
将 计算 机 网 页 显示 在 Android 手机 中 。 当 读者 开发 出 完整 的 android.css 后 ， 可 以 在 HTML 文件 中 将 如 
下 代码 删除 ， 即 不 再 用 这 个 修饰 文件 。 


«link rel="stylesheet" type="text/css" 
href="desktop.css" media="screen and (min-width: 481px)" /> 


在 Chrome 浏览 器 来 浏览 修改 后 的 HTML 文件 ， 不 管 从 Android 手机 浏览 器 还 是 计算 机 浏览 器 ， 
执行 后 都 将 得 到 一 个 完整 的 页 面 展 示 。 此 时 的 完整 代码 如 下 。 


<html> 

<head> 
<title>AAAA</title> 
«link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" /> 
«link rel="stylesheet" type="text/css" href-"desktop.css" media="screen and (min-width: 481px)" /> 
«1-[if IE]> 

«link rel="stylesheet" type="text/css" href-"explorer.css" media="all" /> 

«I[endif]--— 
«script type-"text/javascript" src-"jquery.js"» «/script^ 
«script type-"text/javascript" src-"android js"» «/script» 

«meta http-equiv-"Content-Type" content-"text/html; charset-gb2312"» 

</head> 


<body> 
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<div id="container"> 
<div id="header"> 
<h1><a href="./"> 好 东西 要 分 享 </a></h1> 
<div id="utility"> 
<ul> 
<li><a href="about.htmI"> 关 于 我 们 </a></li> 
<li><a href="blog.htmI"> 博 客 </a></li> 
<li><a href="contact.htmI"> 联 系 我 们 </a></li> 
«Iul» 
</div> 
«div id="nav"> 
<ul> 
<li><a href="bbb.html"> Z [FOE «/a» «/li» 
<li><a href="ccc.htmI"> 电 话 支 持 </a></li> 
<li><a href="ddd.html"> 在 线 客服 </a></li> 
<li><a href="http://www.aaa.com"> 在 线 视 频 </a></li> 
«Iul» 
</div> 
</div> 
«div id="content > 
<h2> 关 于 我 们 </h2> 
<p> 这 是 一 个 学 习 的 网 站 ， 也 是 一 个 交流 的 网 站 .…..</p> 
</div> 
«div id="sidebar"> 
<img alt=" 好 图 片 " src="aaa.png"> 
<p> 这 是 一 个 学 习 的 网 站 ， 也 是 一 个 交流 的 网 站 .…..</p> 
</div> 
«div id="footer"> 
«ul» 
<li><a href-"bbb.html"» BR $$ «/a» «/li» 
<li><a href="ccc.htmI"> 关 于 我 们 </a></li> 
<li><a href="ddd.htmI"> 博 客 </a></li> 
<lul> 
<p class="subtle"> 世 界 第 一 </p> 
</div> 
</div> 
</body> 
</html> 
</html> 


而 desktop.css 的 代码 如 下 。 


For example: 
body ( 

margin:0; 

padding:0; 

font: 7596 "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; 
) 


执行 效果 如 图 2-29 所 示 。 
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图 2-29 执行 效果 
2.6.2 ”设置 页 面 的 缩放 


在 网 页 设计 应 用 中 ， 除 非 我 们 明确 告诉 Android 浏览 器 页 面 的 宽度 是 多 少 ， 否 则 它 会 认为 页 面 宽 
度 是 980px。 这 一 默认 宽度 在 计算 机 中 是 没有 任何 问题 的 ,但 是 如 果 针 对 小 尺寸 屏幕 的 Android 手机 就 
不 合适 了 。 要 想 在 Android 中 正确 显示 网 页 ， 还 需要 在 HTML 文件 的 head 元 素 中 加 一 个 viewport 元 标 
签 ， 这 样 可 以 让 移动 浏览 器 知道 屏幕 的 大 小 。 

«meta name-"viewport" content="user-scalable=no, width=device-width" /> 


通过 上 面 一 行 简短 的 代码 就 实现 了 屏幕 的 自动 缩放 ， 此 时 浏览 器 可 以 根据 显示 屏 的 大 小 带 给 用 户 
不 同 大 小 的 显示 页 面 。 读 者 无 须 担 心 加 上 viewport 后 在 计算 机 上 的 显示 效果 ， 因 为 桌面 浏览 器 会 忽略 
viewport 元 标签 。 

如 果 不 设置 viewport 的 宽度 ， 页 面 在 加 载 后 会 缩小 。 我 们 不 知道 缩放 的 大 小 是 多 少 ， 因 为 Android 
浏览 器 的 设置 项 允许 用 户 设置 默认 缩放 大 小 ， 选 项 有 大 、 中 “〈 默 认 ) 、 小 。 即 使 设置 过 viewport 宽度 ， 
这 个 设置 项 也 会 影响 页 面 的 缩放 大 小 。 


2.6.3 ”使 用 CSS 进行 修饰 


为 Android 开发 网 页 时 ， 也 可 以 使 用 CSS 来 装扮 网 页 。 本 节 将 接着 2.6.2 节 的 演示 代码 继续 讲解 。 
接 下 来 的 任务 是 编写 文件 android.css， 目 的 是 使 网 页 在 Android 手机 中 显示 ， 并 且 要 完美 地 显示 。 


e. 
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1. 设置 基本 的 样式 
第 一 步 任 务 是 设置 背景 颜色 、 字 体 大 小 、 字 体 颜 色 等 基本 样式 。 在 2.6.2 节 实 例 的 基础 上 继续 扩展 ， 
具体 实现 流程 如 下 。 
(1) 在 文件 android.css 中 设置 <body> 元 素 的 如 下 基本 样式 。 


body{ 
background-color: 大 dd; /* 背景 颜色 */ 
color: #222; F 字体 颜色 */ 
font-family: Helvetica; P xA "I 
font-size: 14px; P 字体 大 小 */ 
margin: 0; P 外 边 距 */ 
padding: 0; 广内 边 距 */ 

) 


(2) 开始 处 理 <header> 中 的 <div> 内 容 ， 包 含 主要 入 口 的 链接 〈 也 就 是 logo) 和 一 级 、 二 级 站 点 导航 。 
首先 是 把 logo 链接 的 格式 调整 得 像 可 以 单 击 的 标题 栏 ， 在 此 将 下 面 的 代码 加 入 到 文件 android.css 中 。 


#header h1 ( 
margin: 0; 
padding: 0; 

} 

#header h1 a { 
background-color: #ccc; 
border-bottom: 1px solid #666; 
color: #222; 
display: block; 
font-size: 20px; 
font-weight: bold; 
padding: 10px 0; 
text-align: center; 
text-decoration: none; 


) 

(3) 用 同样 的 方式 格式 化 一 级 和 二 级 导航 的 <ul> 元 素 。 在 此 只 需 用 通用 的 标签 选择 器 (也 就 是 
#header ul) 就 够 用 了 ， 而 不 必 再 设置 标签 <ID>， 也 就 不 必 设 置 #header ul, #utility, #headerul, #nav 
的 样式 了 。 

此 步骤 的 代码 如 下 。 


stheader ul ( 
list-style: none; 
margin: 10px; 
padding: 0; 


#header ul li a { 
background-color: £FFFFFF; 
border: 1px solid #999999; 
color: #222222; 
display: block; 
font-size: 17px; 
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font-weight: bold; 

margin-bottom: -1px; 

padding: 12px 10px; 

text-decoration: none; 
| 


(4) 给 content 和 sidebar div 设置 内 边 距 ， 让 文字 与 屏幕 边缘 之 间 空 出 距离 。 代 码 如 下 。 


#content, sidebar { 
padding: 10px; 
) 
C5) 接 下 来 设置 <footer> 中 内 容 的 样式 。<footer> 中 的 内 容 比较 简单 ， 只 需 将 display 设置 为 none 
即 可 ， 代 码 如 下 。 


#footer ( 
display: none; 


此 时 将 上 述 代码 在 计算 机 中 执行 ， 效 果 如 图 2-30 所 示 。 
在 Android 中 的 执行 效果 如 图 2-31 所 示 。 


在 线 客服 图 http://nayiye.35free.net/ 


关于 我 们 


这 是 一 个 学 习 的 网 站 ， 也 是 一 个 交流 的 网 站 … 


关于 我 们 


i 这 是 一 个 学 习 的 网 站 ， 也 是 一 个 交流 的 网 站 .… 
这 是 一 个 学 习 的 网 站 ， 也 是 一 个 交流 的 网 站 … 

。 服务 

。 关 于 我 们 

u 这 是 一 个 学 习 的 网 站 ， 也 是 一 个 交流 的 网 站 .… 
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2-30 计算 机 中 的 执行 效果 图 2-31 在 Android 中 的 执行 效果 


因为 在 网 页 中 添加 了 自动 缩放 功能 ， 并 且 添 加 了 修饰 Menu 的 样式 ， 所 以 整个 页 面 看 上 去 非常 完 
美 ， 也 充满 了 动感 。 


2. 添加 视觉 效果 


为 了 使 页 面 变 得 精彩 ， 在 第 二 步 中 将 添加 一 些 充满 视觉 效果 的 样式 ， 具 体 实现 流程 如 下 。 
(1) 给 <header> 文 字 加 Ipx 向 下 的 白色 阴影 背景 加 上 CSS 渐变 效果 。 具 体 代 码 如 下 。 


e. 
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#header h1 a { 
text-shadow: Opx 1px 1px #fff, 
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); 

) 

对 于 上 述 代码 ， 有 以 下 两 点 说 明 。 

回 textshadow: 参数 从 左 到 右 分 别 表 示 水 平 偏 移 、 垂 直 偏 移 、 模 糊 范围 和 颜色 。 在 大 多 数 情况 
下 ， 可 以 将 文字 设置 成 上 面 代码 中 的 数值 ， 这 在 Android 界面 中 的 显示 效果 也 不 错 。 在 大 部 
分 浏览 器 上 ， 将 模糊 范围 设置 为 Opx 也 能 看 到 效果 。 但 Android 要 求 模糊 范围 最 少 是 px， 如 
REER Opx, MÆ Android 设备 上 将 显示 不 出 文字 阴影 。 

El -webkit-gradient: 功能 是 让 浏览 器 在 运行 时 产生 一 张 渐变 的 图 片 。 因 此 ， 可 以 把 CSS 渐变 功 
能 用 在 任何 平常 指定 图 片 〈 如 背景 图 片 或 者 列表 式 图 片 ) url 的 地 方 。 参 数 从 左 到 右 分 别 表示 
渐变 类 型 (可 以 是 linear 或 者 radial)、 渐 变 起 点 〈 可 以 是 left top. left bottom, right top 或 者 
right bottom)、 渐 变 终 点 、 起 点 颜色 和 终点 颜色 。 

注意 : 在 上 述 赋 值 时 ， 不 能 颠倒 描述 渐变 起 点 、 终 点 常量 (lefttop. leftbottom, righttop. right bottom) 
的 水 平和 垂直 顺序 。 也 就 是 说 ，top left、bottom left, top right 和 bottom right 是 不 合法 的 值 。 
(2) 给 导航 菜单 加 上 圆 角 样式 ， 代 码 如 下 。 
#header ul li:first-child a ( 


-webkit-border-top-left-radius: 8px; 
-webkit-border-top-right-radius: 8px; 


} 

#header ul li:last-child a { 
-webkit-border-bottom-left-radius: 8px; 
-webkit-border-bottom-right-radius: 8px; 

) 


上 述 代码 使 用 -webkit-border- radius 属性 描述 角 的 方式 ， 定 义 列表 第 一 个 元 素 的 上 两 个 角 和 最 后 一 
个 元 素 的 下 两 个 角 为 以 8 像素 为 半径 的 圆 角 。 此 时 在 Android 中 的 执行 效果 如 图 2-32 所 示 。 
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2-32 在 Android 中 的 执行 效果 
此 时 会 发 现 列表 显示 样式 变 为 了 圆 角 样式 ， 整 个 外 观 显得 更 加 圆润 和 自然 。 


第 3 章 创建 移动 Web 


本 章 将 详细 讲解 创建 移动 Web 应 用 的 最 佳 方法 ， 并 介绍 规划 能 同时 在 移动 设备 及 非 移动 设备 上 运 
行 的 应 用 方法 。 同 时 演示 将 HTML, CSS 及 iQuery 结合 起 来 ， 创 建 简单 应 用 的 过 程 。 并 穿插 讲解 一 些 
移动 Web 应 用 程序 开发 的 实践 经 验 ， 通 过 实践 了 解 使 移动 设备 最 优化 的 布局 及 其 他 技巧 。 


3.1 创建 能 在 通用 设备 上 运行 的 网 站 


Ga 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 3 章 \ 创 建 能 在 通用 设备 上 运行 的 网 站 .avi 

要 设计 一 个 好 的 移动 Web 页 面 或 应 用 程序 ， 关 键 在 于 不 要 仅 针对 移动 设备 设计 。W3C 将 此 称 为 
Design For One Web。 在 设计 一 个 Web 时 ， 不 应 该 只 针对 智能 手机 浏览 器 、 平 板 电 脑 浏 览 器 或 桌面 浏 
览 器 ， 好 的 设计 应 考虑 到 所 有 的 设备 类 型 。 基 于 此 ， 设 计 者 们 应 当 注意 以 下 4 点 。 

回 ”确保 显示 在 移动 设备 上 的 内 容 与 非 移动 设备 上 基本 一 致 〈 不 用 完全 相同 )。 

Rp ”优化 页 面 ， 减 轻 用 户 代 理 的 负载 。 

Ep ”使 用 可 降级 机 制 ， 让 旧 款 或 是 功能 更 少 的 浏览 器 也 能 浏览 内 容 。 

A ”在 尽 可 能 多 的 设备 和 浏览 器 上 测试 所 有 页 面 。 

在 规划 一 个 站 点 时 ， 常 规 步骤 是 从 桌面 版 开始 ， 然 后 进入 移动 设备 版 。 如 果 要 设计 一 个 移动 设备 
应 用 程序 ， 可 以 先 从 面向 想 要 支持 的 移动 设备 浏览 器 开始 规划 ， 在 完成 移动 设备 网 站 设计 后 ， 再 将 其 
改进 或 改变 为 桌面 浏览 器 版 本 。 


3.1.1. 确定 应 用 程序 类 型 


事前 计划 是 网 站 及 移动 设备 Web 应 用 程序 开发 的 关键 。 许 多 人 常常 一 坐 下 来 就 开始 动手 写 代码 ， 
其 实 这 是 一 种 错误 的 做 法 。 通 过 计划 ， 将 会 更 清楚 地 了 解 到 自己 想 要 的 是 一 个 怎样 的 网 站 ， 以 及 如 何 
将 它 实现 。 在 开始 之 前 ， 需 要 明白 如 下 7 个 问题 。 

(1) 要 开发 的 Web 应 用 程序 的 用 途 是 什么 ? 

(2) 开发 这 个 应 用 程序 的 目标 是 什么 ? 

G) 应 用 程序 的 用 户 会 是 哪些 人 ? 

(4) 该 应 用 程序 的 竞争 对 手 有 哪些 ? 

(5) 对 潜在 的 竞争 者 进行 尽 可 能 多 的 调查 。 他 们 产品 的 盈利 是 多 少 ? 市 场 占有 率 为 多 少 ? 他 们 的 
优点 和 缺点 分 别 是 什么 ? 

(6) 还 有 什么 其 他 风险 可 能 影响 到 应 用 程序 的 成 功 ? 

(7) 开发 进度 是 怎样 安排 的 ? 

在 计划 好 应 用 程序 的 用 途 之 后 ， 接 下 来 要 设计 应 用 程序 的 外 观 。 例 如 绘制 一 个 应 用 程序 在 智能 手 
机 或 平板 电脑 上 应 有 外 观 的 简单 原型 。 这 里 绘制 步骤 不 需要 任何 美化 操作 ， 甚 至 不 需要 有 颜色 或 图 片 ， 
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只 要 能 够 表现 出 页 面 外 观 的 基本 思路 即 可 。 
3.1.2 使 用 CSS 改善 HTML 外 观 


在 进行 了 应 用 程序 功能 及 外 观 的 基本 规划 后 ， 可 以 开始 设计 页 面 布局 了 。 大 多 数 设计 者 较 倾向 于 
先 设计 智能 手机 页 面 布局 ， 因 为 它 使 用 单列 布局 ， 而 且 HTML 也 很 简单 。 

原始 的 HTML 文档 外 观 是 很 沉闷 的 ， 颜 色 为 黑白 色 ， 没 有 图 像 或 色彩 ， 甚 至 没有 调整 各 部 分 在 布 
局 中 的 位 置 。 文 本 以 长 单列 的 方式 按 其 在 HTML 中 的 顺序 显示 在 页 面 上 .但 可 以 通过 CSS 来 改变 字体 ， 
添加 颜色 及 背景 图 像 ， 甚 至 更 改 页 面 布局 。 


1. 更 改 字体 


更 改 标题 及 正文 文本 的 大 小 和 字体 是 经 常 要 完成 的 设置 。 读 者 可 能 会 认为 由 浏览 器 自动 选择 字体 大 
小 就 可 以 了 , 但 这 是 不 行 的 一 一 绝 大 多 数 计算 机 都 以 默认 的 16px 来 显示 字体 。 对 于 在 移动 设备 上 运行 的 
网 站 或 应 用 程序 来 说 ， 像 素 不 能 作为 尺寸 单位 。 正 确 的 做 法 是 根据 浏览 器 来 使 用 em 或 百分比 作为 单位 。 

HTML 文档 中 的 em 相当 于 当前 默认 字体 大 小 。 因 此 ， 不 带 任何 样式 的 lem 相当 于 16px， 但 这 个 
字体 大 小 实在 太 大 了 ， 许 多 开发 者 希望 能 将 其 缩小 。 尽 管 可 以 设置 字体 为 一 个 小 一 点 的 em 尺寸 (如 
0.8em) ， 但 是 将 默认 尺寸 减 小 后 再 使 用 em 是 更 便捷 的 做 法 。 

例如 将 默认 字体 尺寸 从 16px 减少 到 10px (这 是 完成 乘除 算法 最 简便 的 数字 ) ， 只 需要 在 样式 表 中 
添加 如 下 代码 即 可 : 


body ( 
font-size: 62.596; 
) 
注意 ， 这 里 用 的 是 百分比 数字 ，16px 的 62.5% 就 是 10px。 当 需要 使 用 14px 字体 时 ， 将 段落 标签 
设 为 1.4em (14px 除 以 10 为 14) 。 
pf 
font-size: 1.4em; 
line-height: 1.8em; 
) 
使 用 em 指定 行 高 度 也 是 个 不 错 的 方法 。 漂亮 的 文本 应 当 在 行 与 行 之 间 有 合适 的 宽度 ， 这 样 会 使 页 
面 更 易于 阅读 。 笔 者 通常 将 字体 大 小 再 加 上 5 一 7px 作为 行 高 。 因 此 对 于 基本 大 小 为 10px 的 字体 来 说 ， 
相当 于 再 增加 0.5em。 在 前 面 的 代码 中 ， 只 在 字体 大 小 基础 上 增加 了 0.4em 作为 行 高 。 


2. 加 入 颜色 及 背景 图 像 


可 以 使 用 许多 方法 来 为 应 用 程序 或 网 站 选择 颜色 。 一 些 人 的 做 法 是 选择 一 种 最 喜欢 的 颜色 ， 或 者 
从 一 幅 图 片 的 调 色 板 中 取 色 。 若 无 法 确定 想 用 哪 种 颜色 ， 网 站 ColourLovers (www. colourlovers.com/) 
可 以 提供 一 些 灵 感 ， 它 们 对 Web 调 色 板 、 模 型 及 颜色 进行 了 充分 的 讨论 。 

下 面 是 应 用 程序 中 经 常用 到 的 一 些 颜色 。 

E] #3c6ac4 用 于 基本 蓝 色 。 

Bl #3c3cc3 用 于 强调 的 深蓝 色 。 
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E] #03963: 用 于 标注 的 棕 褐色 。 

E] #000000 用 于 文本 的 黑色 。 

Ep #ffffF 用 于 背景 的 白色 。 

logo 区 域 会 用 到 一 个 拼图 碎片 的 图 片 ， 多 准备 几 张 图 片 是 不 错 的 主意 ， 这 样 可 以 定期 更 换 它们 。 
如 下 所 示 ， 可 以 使 用 color 属性 来 更 改 字体 颜色 。 


color::£000000; 

更 改 背景 颜色 使 用 的 是 background-color 属性 。 

background-color: #3c6ac4; 

还 可 以 用 CSS 通过 background-image 来 设 定 背 景 图 像 。 该 图 像 通过 指定 URL 导入 。 
background-image: url('background.png); 


上 述 语 句 将 图 片 平 铺 贴 片 至 背景 。 要 避免 重复 贴 片 ， 可 以 使 用 background-repeat 属性 ， 然 后 使 用 
background-position 属性 定义 图 片 位 置 , 还 可 以 单独 使 用 属性 background 来 设置 背景 的 图 像 、 颜色 、 F 
铺 及 位 置 。 

要 在 白色 背景 中 加 入 一 个 背景 图 像 ， 要 求 不 重复 ， 且 位 于 容器 元 素 左上 角 往 下 往 右 各 lem 时 ， 可 
以 写 为 : 


background: #fff url(background.png) no-repeat 1em 1em; 
3. 设置 布局 样式 


在 平板 电脑 等 大 的 屏幕 上 ， 需 要 创建 双 列 布局 ， 增 加 包含 其 他 信息 的 页 脚 ， 这 样 做 在 设计 上 的 好 
处 是 加 重 了 页 面 底部 ， 吸 引用 户 往 下 看 ， 从 而 浏览 整个 页 面 。 此 类 布局 的 有 趣 之 处 在 于 它 如 何 处 理 移 
动 设 备 及 非 移动 设备 页 面 。 通 常 希望 在 小 于 480px 的 设备 窗口 中 阅读 单列 布局 ， 而 在 更 大 的 浏览 区 域 
上 阅读 双 列 布局 (以 及 4 列 页 脚 ) 。 而 在 拥有 宽度 小 于 320px 的 浏览 区 域 的 设备 上 ， 还 希望 去 掉 图 片 ， 
这 样 页 面 能 显示 得 更 快 ， 并 且 不 会 占据 许多 空间 。 

当 使 用 CSS 3 媒体 查询 时 ， 应 当 忽略 会 在 不 同 设 备 上 保持 一 致 的 样式 。 主 CSS 样式 表 应 包括 媒体 
类 型 all 或 screen， 以 便 让 所 有 设备 读 取 。 因 此 可 以 使 用 媒体 查询 样式 表 来 修改 主 样式 。 

接 下 来 将 学 习 如 何在 Web 应 用 程序 中 加 入 媒体 查询 ， 以 支持 特定 手机 、 智 能 手机 、 平 板 电 脑 以 及 
计算 机 浏览 器 。 这 里 的 平板 电脑 及 浏览 器 使 用 相同 的 样式 表 ， 但 是 也 可 以 为 平板 电脑 设计 一 个 专用 样 
RE. 

(1) 在 文档 的 <head> 中 链接 主 样式 表 。 

(2) 在 该 样式 表 中 为 小 于 320px 宽 的 特定 手机 加 入 第 一 个 媒体 查询 样式 表 。 


«link rel="stylesheet" href="styles-320.css" media-"only screen and (max-width:320px)"> 
G) 为 宽度 为 320 一 480px 的 智能 手机 加 入 媒体 查询 。 
«link rel="stylesheet" href="styles-480.css" media="only screen and (min-width:320px) and (max-width:480px)"> 


可 以 将 Web 浏览 器 宽度 调整 至 小 于 320px 宽 以 及 320—480px 宽 之 间 ， 然 后 检测 样式 表 的 工作 情 
况 。 之 后 刷新 页 面 ， 页 面 会 随 之 变化 。 此 处 需要 注意 的 是 ， 如 果 在 iPhone 或 Nexus 这 类 设备 中 进行 测 
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试 ， 看 到 的 是 网 站 的 完整 版 而 非 智能 手机 版 。 这 是 因为 这 类 设备 的 实际 DPI 宽度 大 于 480px。 
3.1.3 ”加 入 移动 meta 标签 


加 入 移动 meta 标签 的 目的 是 更 有 效 地 创建 HTML 5 页 面 , 在 按照 之 前 的 引导 创建 网 站 移动 设备 版 的 
过 程 中 , 读者 可 能 已 经 意识 到 现代 智能 手机 不 会 显示 单列 布局 。 这 是 因为 当 媒体 查询 询问 测 览 器 宽度 时 ， 
Android 手机 会 根据 它 的 分 辩 率 报告 宽度 , 将 会 看 到 完全 版 的 双 列 布局 样式 , 这 种 布局 对 小 屏幕 并 不 友好 。 
虽然 在 Android 上 可 以 进行 缩放 ,但 那 是 一 个 额外 的 操作 。 在 这 种 情况 下 ， 可 以 使 用 meta 标签 来 通知 浏 
览 器 以 设备 宽度 而 非 DPI 宽度 作为 width 值 。 可 以 使 用 viewport meta 标签 来 做 到 这 一 点 ， 例 如 : 


«meta name-'"viewport" content="width=device-width"> 


可 以 使 用 如 下 所 示 的 meta 标签 让 Web 应 用 程序 对 移动 设备 更 加 友好 。 

E] mobileOptimized: 此 标签 为 Pocket IE 设计 。 它 用 于 指定 内 容 的 宽度 (单位 为 px)。 当 此 标签 
存在 时 ， 浏 览 器 强制 将 布局 设 为 单列 。 

E] handheldFriendly: AvantGo 和 Palm 最 初 使 用 此 标签 来 标记 不 应 在 移动 设备 上 被 缩放 的 内 容 。 
该 内 容 在 移动 设备 页 面 上 的 值 为 tue， 非 移动 设备 页 面值 则 为 false。 

E] viewport: 此 标签 用 来 控制 浏览 器 窗口 的 尺寸 及 缩放 比例 。 

E] apple-mobile-Web-app-capable: 如 果 此 标签 的 content 属性 为 yes， 则 Web 应 用 程序 以 全 屏 模 
式 运行 ， 若 为 no 则 反之 。 

E] apple-mobile-Web-app-status-bar-style: 如 果 应 用 程序 运行 于 全 屏 模式 下 ， 可 以 将 移动 设备 上 的 
状态 栏 改 为 black 或 black-translucent。 

E] format-detection: 此 标签 用 于 开关 相关 电话 号 码 的 自动 侦 测 ， 其 值 可 为 telephone=no， 默 认为 
telephone- yes. 

E] apple-touch-startup-image: 其 实 这 并 不 是 一 个 meta 标签 ， 而 是 一 个 <link>。 可 以 使 用 它 来 指定 
应 用 程序 启动 时 显示 的 启动 画面 。 

E] apple-touch-icon 和 apple-touch-icon-precomposed: 也 不 属于 meta 标签 ， 当 将 <link rel-"apple- 
touch-icon"href- icon.png"> 添 加 至 文档 后 ， 可 以 指定 一 个 图 标 将 应 用 程序 保存 至 主 界面 。 


注意 : 在 Android 1.6 及 以 前 的 版 本 中 ， 并 不 能 很 好 地 支持 上 面 介 绍 的 meta 标 签 。 


在 大 部 分 情况 下 ， 必 须 加 入 应 用 程序 的 meta 标签 仅 有 viewport。 使 用 此 标签 的 最 好 方法 是 将 应 用 
程序 宽度 设 为 与 设备 宽度 相同 。 这 样 应 用 程序 可 以 在 浏览 器 下 缩放 ， 而 用 户 不 需要 放大 后 才能 看 清 该 
程序 。 

在 使 用 viewport 标签 时 ， 可 以 调整 如 下 所 示 的 属性 。 
width: viewport 的 像素 宽度 ， 默 认 值 为 980。 其 范围 为 200 一 10000。 
height: viewport 的 像素 高 度 , 默认 值 根据 宽度 及 设备 屏幕 纵横 比 而 定 。 其 范围 为 223 一 10000。 
initial-scale: 应 用 程序 启动 时 的 缩放 比例 。 用 户 可 以 在 此 之 后 自行 缩放 。 
minimum-scale: viewport 的 最 小 缩放 值 ， 默 认 值 为 0.25。 其 范围 为 0 一 10.0。 
maximum-scale: viewport 的 最 大 值 ， 默 认 值 为 1.6。 其 范围 为 0 一 10.0。 
user-scalable: 可 以 通过 设 定 其 值 开 启 或 关闭 用 户 的 缩放 权限 ， 默 认 值 为 yes， 设 为 no 则 不 允 
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许 缩放 。 
M device-width 和 device-height: 用 于 定义 输出 设备 的 可 见 宽 度 及 高 度 。 
可 以 通过 在 meta 标签 中 以 喜 号 分 隔 的 方式 设置 多 个 viewport 选项 。 例 如 : 


«meta name-"viewport"content-"width-device -width, user - scalable=no"> 
3.1.4. 优化 网 站 


移动 用 户 需求 或 多 或 少 与 台式 机 及 笔记 本 用 户 有 所 不 同 ， 其 原因 在 于 移动 用 户 使 用 小 屏幕 ， 而 且 
通常 面临 流量 限制 。 因 此 ， 为 了 面向 移动 用 户 对 网 站 进行 最 大 限度 的 优化 ， 必 须 注意 以 下 几 点 。 
简化 设计 : 设备 越 小 ， 设 计 就 应 当 越 简洁 。 

绝 不 使 用 水 平 滚动 。 

使 用 大 按钮 : 将 许多 小 的 链接 放 在 同一 个 地 方 会 给 移动 用 户 造成 极 大 的 麻烦 。 
为 网 站 浏览 提供 备 选 途径 。 

记录 用 户 偏好 。 

让 数据 输入 尽 可 能 变 得 简单 。 
控制 应 用 程序 大 小 。 

添加 移动 设备 专用 功能 。 

减少 可 察觉 的 等 待 时 间 。 

优化 所 有 环节 。 

使 用 有 助 于 阅读 的 配色 。 

不 要 使 用 像素 作为 测量 单位 。 

让 内 容 尽 可 能 清晰 。 

要 注意 在 部 分 设备 上 可 能 无 效 的 技术 。 

避免 使 用 已 知 的 无 法 在 移动 设备 上 工作 的 技术 。 

以 上 设计 网 站 的 注意 事项 不 仅 针对 移动 设备 ， 在 非 移动 设备 上 也 同样 重要 。 如 果 面 向 的 是 整个 互 
联网 ， 那 么 尽 可 能 面向 更 多 的 设备 和 浏览 器 ， 应 用 程序 才 会 拥有 强大 的 生命 力 ， 并 获得 用 户 的 赞美 。 
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32 ”将 站 点 升级 至 HTML 5 


£22 知识 点 讲解 : 光盘 \ 视 频 讲 解 ' 第 3 章 \ 将 站 点 升级 至 HTML 5.avi 

网 站 建设 工作 是 一 个 需要 付出 很 多 努力 的 工作 ， 其 中 最 大 的 挑战 之 一 就 是 在 什么 时 候 应 该 把 现 有 
站 点 升级 至 新 技术 。 本 节 将 简要 讲解 HTML 5 fI HTML 4 之 间 的 不 同 , 以 及 哪些 浏览 器 支持 什么 特性 。 
但 浏览 器 是 否 支持 也 并 非 唯 一 决定 因素 。HTML 5 的 一 些 特性 可 以 让 网 站 变 得 更 好 ， 即 使 不 能 获得 所 
有 浏览 器 支持 ， 一 些 特 性 甚至 可 以 将 一 个 标准 网 站 转化 为 专业 级 移动 设备 应 用 程序 。 


3.2.1. 确定 何 时 升级 和 升级 的 具体 方式 


自从 1990 年 以 来 ，HTML 4 和 HTML 4.01 都 已 获得 许多 浏览 器 的 支持 ， 并 在 1998 年 成 为 标准 。 
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使 用 一 种 已 完成 标准 的 好 处 在 于 它 的 浏览 器 支持 带 有 普遍 性 ， 或 者 至 少 是 应 当 具 有 普遍 性 。 
但 在 考虑 长 期 保持 HTML 4 之前， 应当 考虑 以 下 几 点 。 
回 HTML 4 的 浏览 器 支持 并 非 如 想象 般 广 泛 ， 其 实 当今 最 流行 的 浏览 器 并 不 支持 此 标准 。 
回 ”许多 设备 用 的 浏览 器 并 不 支持 全 部 的 HTML 4， 甚 至 只 是 最 低 限 度 地 支持 它 。 
许多 设备 用 的 浏览 器 能 很 好 地 支持 HTML 5， 而 它们 的 使 用 率 正 在 增加 。 
回 ”如 果 计 划 在 未 来 几 年 开发 一 个 Web 产品 ， 停 留 在 HTML 4 会 是 一 个 糟糕 的 决定 。 
HTML 5 比 HTML 4 提供 更 多 的 特性 及 功能 ， 而 且 使 用 HTML 5 的 设备 正在 逐渐 普及 。 


1. 现 有 标准 的 通行 浏览 器 支持 

截至 2012 年 底 ， 正 浏览 器 是 市 面 中 最 受 欢迎 的 浏览 器 之 一 。 除 此 之 外 ， 其 他 流行 的 浏览 器 包括 
Firefox, Chrome 和 Safari。 桌 面 浏览 器 包括 Firefox, Safari 和 Chrolrie 等 ， 都 能 提供 良好 的 HTML 5 
支持 ， 能 支持 超过 70% 的 HTML 5 标准 特性 。 移 动 设 备 浏览 器 包括 Opera. Android 和 iOS Safari, X} 
HTML 5 的 支持 稍微 逊色 ， 例 如 Android 3.0 及 Opera Mobile 11.5 支持 超过 60% 的 HTML 5 特性 ， 而 
Android 2.3 仅 支 持 不 到 50% 的 特性 。 虽 然 移 动 设备 浏览 器 在 HTML 5 支持 方面 并 没有 走 得 太 远 ， 但 至 
少 它们 表现 得 比 TE 浏览 器 要 好 。 由 此 可 见 , 在 使 用 HTML 5 设计 页 面 时 , 唯一 需要 担心 的 浏览 器 是 TE. 


2. 一 步 一 步 的 升级 


升级 网 站 的 最 好 做 法 是 逐渐 进行 的 ， 它 也 被 称 为 迭代 设计 (Tterative Design) 。 和 迭代 设计 是 在 大 量 
测试 的 基础 上 ， 让 网 站 缓慢 而 逐渐 变化 的 过 程 。 与 其 设计 一 个 标新立异 的 网 站 ， 不 如 使 用 迭代 设计 不 
断 增添 几乎 不 为 用 户 察觉 的 细微 变化 。 

在 考虑 升级 到 HIML 5 时 ， 可 以 考虑 如 下 所 示 的 因素 。 
访问 网 站 的 浏览 器 类 型 。 
访问 网 站 的 移动 设备 数量 。 

网 站 可 以 从 HTML 5 升级 中 得 到 什么 好 处 。 
需要 为 主要 设计 提供 什么 资源 。 

网 站 的 逐渐 升级 应 当 从 访问 量 最 少 的 冷门 页 面 开始 。 如 果 在 升级 过 程 中 出 现 大 问题 ， 对 用 户 造 成 
的 影响 也 会 相对 较 少 ， 这 样 修复 问题 所 做 的 工作 也 会 相对 轻松 。 

在 站 点 上 逐渐 添加 HTML 5 时 ， 可 以 使 用 隔离 测试 (让 一 些 用 户 使 用 旧版 本 ， 另 一 些 用 户 使 用 新 
版 本 ) ， 这 样 将 两 者 相 比较 就 可 以 观察 出 新 特性 的 运作 情况 ， 也 非常 利于 研究 和 改进 自己 的 升级 手段 。 
可 以 使 用 Google Website Optimizer (www.google.com/Websiteoptimizer/b/index.html) 在 网 站 上 进行 隔 
离 测 试 。 

3. 调查 来 访 浏 览 器 的 类 型 

在 升级 网 站 时 ， 首 先 需 要 考虑 的 是 什么 样 的 浏览 器 能 支持 将 要 使 用 的 技术 。 可 以 访问 W3Counter.com 
这 类 网 站 ， 然 后 发 现 拥有 最 大 市 场 占有 率 的 浏览 器 仍 是 正 ， 从 而 放弃 使 用 HTML 5。 如 前 所 述 ， 许 多 
开发 者 正 是 这 样 做 的 。 

但 W3Counter.com 仅 提供 了 它 所 追踪 的 网 站 数据 ， 还 有 许多 别 的 网 站 ， 例 如 Apple.com。 尽 管 可 
能 会 有 一 些 使 用 TE 的 用 户 访问 了 Apple.com， 但 在 该 站 上 的 浏览 器 市 场 占有 率 应 该 与 W3 Counter.com 
上 的 截然 不 同 。 也 许 一 个 网 站 会 有 76% 的 Firefox 用 户 ， 这 类 网 站 的 开发 者 便 不 需要 考虑 正 支持 。 

由 此 可 见 ， 不 可 能 同时 良好 地 兼容 所 有 的 浏览 器 ， 因 此 在 改动 网 站 之 前 ， 先 参考 一 下 网 站 访问 统 


9) 


回 
回 
回 
回 


adroid 移动 网 站 开发 详解 


计数 据 ， 确 定 最 常见 的 10 种 访问 站 点 的 浏览 器 以 及 对 应 版 本 是 什么 。 鉴 于 大 部 分 网 站 的 移动 设备 访问 
用 户 数量 完全 无 法 与 普通 浏览 器 访问 用 户 数量 相 比 ， 建 议 将 移动 设备 浏览 器 访问 用 户 另 行 统计 ， 这 样 
可 以 更 清楚 地 了 解 站 点 上 的 浏览 器 使 用 类 型 的 变化 以 及 需要 考虑 的 浏览 器 类 型 。 

在 知道 了 10 款 访问 最 多 的 桌面 浏览 器 以 及 移动 设备 浏览 器 都 是 哪些 之 后 , 可 以 开始 设计 要 在 网 站 
中 添加 何 种 HTML 5 特性 了 。 


4. 总 结 移动 互联 网 浏览 趋势 


在 了 解 到 访问 网 站 的 常见 浏览 器 类 型 后 ， 可 能 会 针对 它们 来 设计 网 站 。 但 浏览 器 的 使 用 率 一 直 在 
改变 ， 网 站 现在 并 没有 很 多 来 自 移 动 设备 的 访问 ， 并 不 意味 着 将 来 也 会 如 此 。2010 年 12 月 , 美国 及 英 
国 只 有 20% 的 互联 网 用 户 从 不 通过 移动 设备 浏览 网 络 ， 而 在 非洲 和 亚洲 ， 这 个 比例 是 50%。 定 期 使 用 移 
动 设 备 浏览 网 络 的 人 群 数量 正在 增长 ， 而 随 着 平板 电脑 日 趋 普及 ， 这 种 增长 会 越 来 越 明显 。 所 有 网 站 的 
移动 设备 用 户 在 未 来 都 会 持续 增长 ， 如 果 编 写 支持 移动 设备 的 页 面 ， 网 站 将 会 屹立 于 时 代 潮 流 前 沿 。 

HTML 5 非常 适合 支持 移动 设备 ，Android 设备 正在 日 趋 普及 ， 因 此 开发 基于 标准 并 在 这 两 种 系统 
上 运行 的 应 用 程序 ， 也 会 越 来 越 具 性 价 比 。HTML 5 作为 一 个 正在 这 些 平台 上 积累 支持 的 标准 语言 ， 
它 的 发 展 是 一 个 自然 的 进程 。 


3.22 升级 到 HTML 5 的 步骤 


将 现 有 Web 页 面 从 HTML 4.01 FRÆ HTML 5 的 步骤 如 下 。 

(1) 将 doctype 改 为 新 的 HTML 5 doctype:<!doctype html>。 该 操作 不 会 对 浏览 器 造成 任何 影响 ， 
若 该 doctype 无 法 被 浏览 器 识别 ， 浏 览 器 只 会 将 其 忽略 。 新 的 doctype 更 小 ， 能 够 帮助 用 户 节省 需要 加 
载 的 字 节 。 

(2) 使 用 新 的 字符 集 meta 标签 : <meta charset utf-8>， 该 标签 已 经 被 所 有 主流 浏览 器 支持 。 

G) 简化 <script> 和 <style> 标 签 。 不 再 需要 为 JavaScript(ECMAScript) 或 是 层 营 样式 表 特 意 指定 type 
属性 ， 因 此 关闭 此 属性 将 使 HTML 变 得 更 流畅 。 

(4) 链接 整个 区 块 而 非 区 块 中 的 文本 。 把 <a> 标 签 围绕 在 <p> 周 围 不 会 给 浏览 器 带 来 问题 ， 而 将 整 
个 段落 进行 链接 比 单 击 其 中 一 到 两 个 词 更 容易 ， 这 种 链接 包括 了 该 段落 区 块 中 的 所 有 元 素 。 

C5) 使 用 表单 输入 类 型 。 在 需要 电话 号 码 时 使 用 type=tel， 需 要 电子 邮件 地 址 时 使 用 type=email。 
不 支持 这 些 类 型 的 浏览 器 会 像 平 时 一 样 显示 文本 输入 字段 ， 支 持 此 类 型 的 浏览 器 将 提供 额外 的 功能 。 

(6) 使 用 <video> 及 <audio> 标 签 添加 视频 及 音频 ， 并 为 旧 浏览 器 提供 回 退 方案 。 

CI) 即便 不 使 用 HTML 5 标签 ， 也 可 以 使 用 区 块 元 素 作为 文档 的 class 名 。 例 如 可 以 使 用 <div 
class="header"> 代 蔡 <header>。 

(D 在 所 有 合适 的 地 方 使 用 语义 标签 。 例 如 <mark> 及 <time> 这 类 标签 为 内 容 提 供 额 外 信息 ， 无 法 
辨识 此 类 标签 的 浏览 器 只 会 将 它们 忽略 。 


3.2.8 ”将 HTML 5 特性 作为 额外 内 容 添加 至 网 站 
为 网 站 添加 HTML 5 特性 的 一 个 办 法 ， 是 把 它们 当 作 额 外 内 容 进 行 添加 。 如 果 浏 览 器 不 支持 ， 用 


户 还 是 可 浏览 原本 的 内 容 。 而 在 浏览 器 支持 它们 时 ， 用 户 就 能 享受 到 额外 的 好 处 。 下 面 是 一 些 现在 就 
可 以 添加 至 页 面 的 HTML 5 元 素 。 


e. 


sss MESUWA 000 


figure 和 figcaption: 功能 是 定义 所 包含 的 内 容 区 块 。 

Mark: 功能 是 高 亮 显示 一 段 文字 。 

Small: 这 是 一 个 HIML 4 标签， 在 HTML 5 中 不 仅 可 以 表示 小 字号 文本 ， 还 可 以 用 来 定义 小 注 。 

Time: 功能 是 定义 日 期 及 时 间 。 

了 使 用 上 述 元 素 外 ， 还 可 以 使 用 其 他 方法 来 借助 HTML 5 改进 网 站 。 具 体 说 明 如 下 。 

不 须要 为 属性 加 引号 。 如 果 属 性 内 不 包含 空格 ， 则 可 以 去 掉 引 号 。 这 种 做 法 简化 了 代码 并 减 

少 需 要 下 载 的 字符 数 。 

回 ”使 用 新 的 doctype:<!doctype html> 格 式 ， 新 格式 更 短 ， 而 且 完 全 不 会 影响 浏览 器 的 处 理 。 

B ”无须 考 虑 大 小 写 。HTML 5 对 标签 和 属性 的 大 小 写 没有 任何 要 求 。 

下 面 是 一 些 新 的 HTML 5 表单 特性 。 

回 ”使 用 占 位 符 属性 。 占 位 符 文本 用 于 提示 表单 区 域 该 如 何 填写 。 

Ep 定义 必 填 字段 ， 并 始终 在 服务 器 端 以 及 客户 端 同时 验证 该 字段 。 无 法 支持 此 特性 的 浏览 器 会 
将 其 忽略 。 

ED 设置 自动 焦点 。 自 动 焦点 会 将 光标 放置 在 第 一 个 表单 元 素 中 。 通常 会 用 JavaScript 来 实现 这 个 
功能 ， 因 此 加 入 autofocus 属性 不 会 造成 任何 影响 。 

RE) ”本 地 存储 检查 选项 。 本 地 存储 为 数据 提供 更 多 空间 ， 从 而 改进 表单 及 应 用 程序 。 

E ”使 用 CSS 3。 很 多 浏览 器 支持 CSS 3， 使 用 它 能 够 使 网 站 得 到 很 大 的 改善 。 

回 SVG， 即 可 伸缩 矢量 图 ， 能 被 Android 2.3 以 外 的 所 有 浏览 器 的 当前 版 本 支持 。 

另外 ， 还 有 一 些 实际 上 并 不 属于 HTML 5 的 特性 ， 但 它们 同样 能 给 网 站 增添 更 多 活力 。 


3.2.4 HTML 5 为 移动 Web 提供 的 服务 


HTML 5 不 仅 能 改进 面向 桌面 浏览 器 的 网 站 ， 它 的 一 些 特性 更 是 为 移动 设备 量 身 打 造 的 ， 具 体 说 
明 如 下 。 


回 
回 


S| 


地 理 定位 : 这 是 一 个 HIML 5 独 有 的 API， 移 动 设 备 非常 需要 定位 服务 。 

离线 应 用 程序 : 因为 移动 设备 经 常 处 于 移动 中 ， 而 且 并 非 始终 在 线 ， 而 离线 应 用 程序 无 论 是 
否 存在 网 络 连 接 时 都 可 以 使 用 ， 因 此 十 分 适合 移动 设备 。 

语音 识别 : HTML 5 将 speech 属性 加 入 表单 标签 中 ， 而 对 手机 说 话 比 在 上 面 写字 要 简单 得 多 。 
新 输入 类 型 : 新 的 表单 输入 类 型 让 表单 在 移动 设备 上 变 得 更 容易 填写 。 

标签 canvas-canvas: 此 标签 十 分 适合 用 来 在 移动 设备 应 用 程序 中 添加 动画 、 游 戏 以 及 图 像 。 
视频 及 音频 标签 : 这 两 种 标签 在 Android 以 及 iOS 下 都 能 获得 很 好 的 支持 ， 可 以 使 用 它们 来 
轻松 地 在 Web 应 用 程序 中 添加 视频 及 音频 。 

移动 设备 事件 touchstart 和 touchmove: 此 事件 是 专 为 触 屏 式 移动 设备 设计 的 。 


ARARA 
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33 ”将 Web 程序 迁移 到 移动 设备 


Ga 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 3 章 \ 将 Web 程序 迁移 到 移动 设备 .avi 
JE HTML 5 Web 应 用 程序 需要 很 多 时 间 和 精力 ， 其 中 最 重要 的 是 让 该 网 站 或 应 用 程序 变 得 尽 可 
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id 移动 网 站 开发 详解 


能 具有 普遍 的 适应 性 。 其 实在 日 常 应 用 中 ， 有 许多 软件 工具 以 及 开发 技巧 可 以 将 开发 的 移动 设备 应 用 
程序 或 者 现 有 网 站 转化 为 移动 网 站 。 本 节 将 详细 讲解 检测 现 有 文档 的 移动 设备 支持 的 工具 ， 并 介绍 在 
使 用 基本 元 素 设计 应 用 程序 过 程 中 用 到 的 一 些 技巧 。 


3.3.1 选择 Web 编辑 器 


在 开发 移动 Web 应 用 程序 的 过 程 中 经 常用 到 Web 编辑 器 工具 ， 通 过 专业 的 Web 编辑 器 或 是 集成 
开发 环境 可 以 为 设计 人 员 提 供 更 丰富 的 功能 。 专 业 Web 编辑 器 以 及 IDE 提供 了 如 下 所 示 的 特性 。 
代码 校 验 。 
浏览 器 预览 。 
网 站 文件 管理 。 
项 目 管理 。 
脚本 调试 。 
与 其 他 工具 的 集成 。 
在 当前 的 市 面 应 用 中 ， 最 常用 的 移动 应 用 程序 Web 编辑 器 如 下 所 示 。 
E] Dreamweaver: Dreamweaver CS 的 最 新 版 本 集成 了 PhoneGap. 
E] KomodoIDE: 支持 许多 不 同 的 编程 语言 , 它 也 是 一 款 使 用 jQuery 来 创建 HTML 5 应 用 程序 的 
很 不 错 的 文本 编辑 器 。 

E] TopStyle: TopStyle Cwww.topstyle4.com/) 是 一 款 用 于 Windows 的 CSS 编辑 器 ， 包 含 了 许多 
HTML。 它 提供 的 功能 包括 移动 设备 预览 以 及 移动 用 户 脚本 ， 是 用 来 编辑 移动 Web. 应 用 程序 
的 很 不 错 的 一 种 选择 。 

E] SiteSpinner Pro: 是 一 个 WYSIWYG (What You See Is What You Get, 所 见 即 所 得 ) 的 Windows 

编辑 器 ， 它 提供 作用 于 移动 设备 上 的 脚本 以 及 预览 。 

读者 可 以 选择 一 款 Web 编辑 器 用 来 创建 Web 应 用 程序 , 或 者 将 现 有 网 站 转化 为 移动 版 。 如 果 已 经 
有 正在 使 用 的 Web 编辑 器 ， 那 也 没有 必要 进行 改变 。 但 是 如 果 还 在 用 非 专 业 HTML 的 文本 编辑 器 (如 
Notepad 或 TextEdit) 来 编辑 Web 页 面 ， 那么 应 当 改 为 使 用 Web 编辑 器 ， 以 便 让 开发 工作 的 效率 更 高 ， 
工作 更 加 顺利 。 


3.8.2 ”测试 应 用 程序 


测试 应 用 程序 的 第 一 步 是 看 应 用 程序 目前 在 移动 支持 方面 的 状况 。 首 先 在 尽 可 能 多 的 移动 设备 上 
记录 测试 结果 ， 即 便 只 测试 一 台 移 动 设备 也 比 什 么 都 没有 要 好 。 在 大 多 数 情 况 下 ， 测 试 时 的 最 大 问题 
是 发 现 网 站 对 移动 设备 不 够 友好 。 下 面 列 出 了 常见 的 不 够 友好 的 原因 。 

加 ”标题 尺寸 偏 小 。 

E) ”移动 网 站 不 应 该 有 两 级 导航 。 

E] Recent Posts 标题 占用 空间 太 大 。 

E) ”实际 颜色 与 设计 时 挑选 的 颜色 有 偏差 。 

测试 Web 页 面 和 应 用 程序 的 最 好 工具 之 一 是 验证 器 ， 可 以 选择 许多 不 同 的 Web 应 用 程序 验证 器 ， 
主要 包括 如 下 所 示 的 几 种 。 


e. 


ARARARRA 


sss esaw 


回 HTML 验证 器 : 功能 是 确认 HTML 是 否 正确 。 

回 “可 访问 性 验证 器 : 功能 是 检查 Web 页 面 是 否 能 被 屏幕 阅读 器 正常 读 取 。 

E] ”编码 验证 器 : 功能 是 检查 脚本 、CSS 以 及 API 调用 。 它 也 被 称 为 lint， 如 JS lint 用 来 检查 
JavaScript. 


回 “ 移 动 验证 器 ， 功 能 是 针对 如 何 面向 移动 设备 改进 页 面 提供 建议 ， 经 常 带 有 模拟 器 功能 。 
3.3.3 ”移动 网 站 内 容 的 特点 


在 当前 Web 设计 应 用 中 ， 移 动 网 站 的 内 容 应 当 包 括 如 下 特点 。 
EI 简短: 设备 越 小 ， 单 次 下 载 的 内 容 就 应 当 越 简短 。 因 此 ， 在 iPad 或 计算 机 上 可 能 一 次 性 下 载 
完 的 一 整 页 文章 ， 在 功能 手机 上 下 载 时 应 当 分 割 为 几 部 分 下 载 ， 或 仅 下 载 标题 。 
回 直接 : 要 在 小 型 设备 上 迅速 吸引 读者 的 注意 力 ， 因 此 所 有 与 主题 无 关 的 内 容 都 应 删除 。 
ED DM: 在 功能 手机 上 单 击 返 回 键 比 填写 表单 要 容易 得 多 。 因 此 要 让 移动 内 容 ， 特 别 是 针对 小 
型 设备 的 移动 内 容 尽 可 能 简单 易 用 。 
回 ”专注 于 用 户 需求 : 设备 越 小 ， 越 该 注意 仅 向 用 户 提供 他 们 所 需 的 最 基本 功能 。 另 外 ， 不 要 只 
考虑 需要 移 除 的 内 容 ， 还 应 当 考虑 在 页 面 上 加 入 什么 样 的 功能 ， 以 使 移动 用 户 的 任务 处 理 更 
为 便捷 。 可 以 加 入 移动 页 面 的 功能 包括 以 下 方面 。 
» 回 到 首页 链接 。 
> ”电子 邮件 链接 : 加 入 链接 让 访问 者 可 以 将 页 面 的 某 些 部 分 邮寄 给 自己 或 其 他 人 。 这 样 做 
一 方面 推广 了 页 面 ， 另 一 方面 由 于 在 计算 机 上 读 取 网 站 比 在 功能 手机 上 简单 得 多 ， 这 样 
做 实际 上 也 提高 了 移动 用 户 的 使 用 效率 。 
> ”附加 服务 ， 加 入 Mobilizer、Read It Later 以 及 Instapaper 等 附加 服务 链接 ， 可 以 让 移动 用 
户 将 内 容 保存 起 来 ， 并 在 方便 的 时 候 再 进行 阅读 。 


3.3.4 为 移动 设备 调整 可 视 化 设计 


移动 设计 有 许多 共通 之 处 ， 但 不 幸 的 是 ， 其 中 最 大 的 共通 之 处 在 于 它们 都 十 分 丑陋 。 其 中 原因 在 
于 人 们 接受 了 本 章 之 前 提 到 的 理念 ， 并 将 它 理解 为 应 当 “ 以 最 低 标准 进行 设计 ”。 但 事实 上 这 是 最 为 
错误 的 理解 ， 可 视 化 设计 的 核心 理念 不 在 于 让 网 站 在 所 有 环境 下 看 起 来 雷同 ， 而 在 于 让 网 站 在 目标 客 
户 眼 中 精美 绝 仑 ， 在 其 他 大 部 分 设备 上 至 少 也 该 做 到 功能 正常 。 
在 移动 设计 应 用 中 有 一 些 常见 的 典型 设计 ， 这 些 设计 让 应 用 程序 变 得 更 具 亲和力 ， 而 且 更 容易 使 
用 。 具 体 说 明 如 下 。 
wp d. 特别 是 在 针对 功能 手机 的 设计 中 ， 有 必要 将 图 片 数 量 尽 可 能 控制 在 最 少 。 尽 量 在 一 页 
里 提供 足够 的 内 容 ， 这 样 用 户 就 不 用 频繁 地 单 击 新 页 面 。 
回 ”按钮 通常 在 屏幕 顶端， 位 于 标题 旁边 , 用 于 帮助 移动 用 户 进行 导航 。 此 类 按钮 包括 下 一 页 ( 通 
常 位 于 右 侧 )、 上 一 页 (通常 位 于 左 侧 )、 更 多 信息 、 信 息 目录 ， 以 及 所 有 对 当前 页 面 有 意义 
的 内 容 。 
回 ”确保 列表 阅读 起 来 比 段落 要 轻松 得 多 ， 并 且 列 表 应 尽量 简短 ， 在 功能 手机 上 每 栏 3 一 5 个 字 ， 


在 智能 手机 上 每 栏 5 一 10 个 字 。 
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3.3.5 


宣传 图 片 通常 位 于 标题 处 ， 可 能 包括 一 个 单行 简介 以 及 一 个 单 击 便 可 阅读 全 文 的 箭头 。 需 要 
在 小 屏幕 上 展示 许多 项 目 时 ， 这 是 一 个 很 好 的 做 法 。 

移动 设备 上 的 菜单 可 以 十 分 复杂 ， 而 最 常见 的 菜单 图 案 为 单列 选项 〈 通 常 长 度 为 一 两 个 字 )， 
在 单 击 时 可 以 展开 次 级 菜单 。 

鉴于 大 部 分 网 站 都 将 移动 网 站 的 内 容 分 为 许多 页 ， 需 要 为 页 面 之 间 的 切换 设计 一 种 简单 的 方 
法 。 常 见 做 法 是 在 内 容 下 方 加 入 一 个 水 平 列表 ， 当 前 页 面 显示 为 粗 体 且 不 带 链 接 ， 而 其 他 页 
面 的 数字 两 侧 有 “上 一 页 ”及 “下 一 页 ”。 即 便 页 面 数量 大 于 3 一 5 页 ， 也 应 当 在 列表 中 显示 
最 多 3 一 5 个 页 面 数 字 。 

连续 页 面 在 用 户 滑 动 至 页 面 底部 时 持续 加 长 。 这 种 做 法 可 以 加 快 下 载 速 度 ， 并 可 以 让 用 户 在 
不 进行 单 击 操作 的 情况 下 连续 阅读 。 

选项 卡 是 一 种 应 用 广泛 的 导航 设计 ， 在 桌面 设计 上 的 使 用 率 和 移动 设计 上 差不多 。 它 们 可 以 
被 放 在 同一 行 中 ， 因 此 十 分 适合 作为 顶级 导航 存在 。 

可 以 将 内 容 隐 藏 在 触发 按钮 下 ， 这 样 可 以 让 页 面包 含 更 多 内 容 且 不 会 让 用 户 感觉 阅读 吃力 。 
这 个 功能 对 于 移动 设备 来 说 非常 好 ， 因 为 页 面 加 载 的 同时 所 有 内 容 已 下 载 ， 即 便 其 属于 显示 
隐藏 状态 也 是 如 此 。 

将 移动 页 面 设计 为 先 加 载 内 容 ， 再 加 载 广告 及 导航 。 如 果 某 些 内 容 对 于 移动 用 户 来 说 并 没有 
太 大 必要 ， 例 如 侧 边栏 ， 那 么 可 以 将 其 隐藏 起 来 。 

虽然 说 让 移动 设计 的 外 观 与 计算 机 设计 外 观 保持 完全 相同 并 没有 必要 ， 但 至 少 这 两 者 应 该 尽 
量 相似 ， 具 体 体现 在 Logo、 颜 色 以 及 版 权 信 息 等 ， 这 些 信息 应 在 两 种 网 站 上 保持 一 致 。 


HTML 5 及 CSS 3 检测 


要 开发 HTML 5 网 站 或 应 用 程序 ，Modernizr 是 一 款 较 好 的 工具 。 这 是 一 个 小 型 JavaScript Æ, H 
来 检查 CSS 3 及 HTML 5 支持 ， 并 为 不 支持 相关 功能 的 浏览 器 提供 回 退 方案 。 

读者 可 以 从 www.modernizr.com/ 上 下 载 modernizr-x.x.min.js 脚本 ， 然 后 将 文件 加 入 网 站 目录 中 ， 
通过 如 下 格式 将 脚本 添加 至 文档 的 head 部 分 。 


«script src-"modernizr-& s min.js"» «/script» 

然后 通过 如 下 格式 加 入 no-js 类 。 

<html class="no-js"> 

这 样 Modernizr 就 安装 完成 了 。 它 将 自动 加 载 并 检测 40 多 种 CSS 3 和 HTML 5 函数 。 还 可 以 添加 
当前 并 不 包含 在 Modernizr 中 的 检测 内 容 。 但 是 Modernizr 并 不 能 检测 所 有 东西 ， 还 是 要 为 一 些 特征 加 
入 标准 浏览 器 嗅 探 、 浏 览 器 判断 〈 例 如 ， 当 存在 document.all 指定 特性 时 ， 浏 览 页 面 的 浏览 器 就 必须 为 


指定 类 型 ) ， 或 者 为 所 有 浏览 器 提供 一 个 回 退 机 制 。 
Modernizr 不 能 检测 以 下 内 容 。 


网 页 表单 中 的 日 期 及 拾 色 器 功能 。 
Android 移动 设备 上 的 contenteditable 属性 ， 用 于 允许 用 户 编辑 指定 内 容 。 
音频 及 视频 中 的 preload 属性 支持 。 


回 ” 软 连 字 符 〈&shy; ) 以 及 <wbr> 标 签 支持 。 

E] HTML 实体 的 解析 。 

回 PNG 透明 度 。 

至 于 其 他 无 法 检测 的 内 容 , 读者 可 以 登录 https://github.com/Moderizr/Modernizr/wiki/Undetectables 
查看 。 


1. 多 设备 支持 


面向 整个 互联 网 设计 网 站 是 个 美好 的 愿望 ,也 是 W3C 的 理想 。 但 实际 上 如 果 想 让 应 用 程序 在 各 种 
设备 上 可 用 ， 就 要 为 不 同 的 设备 及 浏览 器 预 留 空间 。 
框架 是 一 种 解决 办 法 ， 它 将 复杂 技术 整合 在 一 起 作为 对 象 供 人 使 用 。 典 型 的 HTML 框架 会 提供 布 
局 网 格 、 排 版 ， 以 及 导航 、 表 单 、 链 接 这 类 对 象 。 可 以 使 用 一 些 HTML 5 移动 框架 来 创建 可 同时 在 iOS 
及 Android 两 种 移动 设备 上 使 用 的 HTML 5 应 用 程序 。 下 面 是 一 些 值得 推荐 的 HTML 5 移动 框架 。 
(1) Sencha Touch-Sencha Touch 
这 是 一 种 JavaScript 框架 ， 可 以 利用 它 来 创建 应 用 程序 ， 这 类 应 用 程序 在 iOS. Android 以 及 
BlackBerry 上 看 起 来 像 本 地 应 用 程序 。 
(2) jQuery Mobile 
WA jQuery. HFX iOS. Android. BlackBerry. WebOs 以 及 Windows 手机 开发 页 面 。 
(3) PhoneGap 
PhoneGap 不 仅仅 是 一 款 框架 ， 除 了 可 以 用 来 创建 移动 应 用 程序 外 ， 还 可 以 用 来 将 HTML 5 应 用 程 
序 转换 为 原生 移动 应 用 程序 。 通过 PhoneGap, 可 以 将 上 述 任何 一 款 框架 转换 成 可 以 在 Android 及 Apple 
电子 市 场 上 出 售 的 应 用 程序 。 如 果 只 使 用 一 种 框架 ， 最 好 选择 PhoneGap 。 
2. 在 其 他 设备 上 进行 测试 
应 用 程序 测试 是 开发 过 程 中 的 一 个 重要 环节 ， 应 当先 在 自 有 设备 上 进行 测试 ， 然 后 再 设法 在 其 他 
设备 上 测试 。 通 常 来 说 ， 可 以 通过 以 下 3 种 方法 在 自己 没有 的 设备 上 进行 测试 。 
回 ”购买 或 租赁 设备 。 
E] “请求 他 人 帮助 。 
回 ” 使 用 模拟 器 。 


3. 桌面 模拟 器 测试 

在 测试 应 用 程序 时 ， 也 可 以 使 用 模拟 器 来 测试 。 最 好 的 模拟 器 是 可 以 在 桌面 计算 机 上 运行 的 模拟 
器 ，Android 模拟 器 可 以 从 http://developer.android.com/sdk/index.html 获取 。 

4. 在 线 模拟 器 


在 线 模拟 器 的 效果 比 不 上 桌面 模拟 器 ， 因 为 它们 功能 更 少 ， 不 过 使 用 起 来 很 方便 。 通 常 有 以 下 在 
线 模拟 器 。 

M Opera Mini Simulator (www.opera.com/mobile/dem0/)。 

回 DeviceAnywhere Cwww.tryphone.com/). 


M BrowserCam Cwww.browsercam.com/). 
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第 4 章 HTML 5 在 移动 设备 


HTML 5 是 近 十 年 来 Web 标准 最 巨大 的 飞跃 。 和 以 前 的 版 本 不 同 ，HTML 5 并 非 仅 用 来 表示 Web 
内 容 ， 它 的 使 命 是 将 Web 带 入 一 个 成 熟 的 应 用 平台 ， 在 这 个 平台 上 ， 视 频 、 音 频 、 图 像 、 动 画 以 及 同 
计算 机 的 交互 都 被 标准 化 。 尽 管 HTML 5 的 实现 还 有 很 长 的 路 要 走 ， 但 是 HTML 5 正在 改变 着 Web. 
本 章 将 详细 讲解 HTML 5 的 基本 知识 ， 特 别 是 新 特性 方面 的 知识 ， 为 读者 步 入 本 书后 面 知 识 的 学 习 打 
下 基础 。 


4.1 把 握 未 来 的 风向 标 


Gh 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 4 章 \ 把 握 未 来 的 风向 标 .avi 

虽然 在 第 2 章 中 已 经 介绍 了 HTML 标记 语言 的 基本 知识 ， 但 都 是 基于 HTML 4 的 。 其实 HTML 
一 直 在 蓬勃 发 展 ， 并 且 诞生 了 最 新 的 版 本 一 一 HTML 5. HTML 5 号 称 史上 最 强 的 HTML 标记 语言 , 能 
够 支持 多 媒体 和 数据 存储 。 虽 然 现在 的 主流 Web 都 是 基于 HTML 4 的 , 但 是 随 着 各 大 浏览 器 厂商 最 新 
版 本 的 推出 ，HTML 5 必 将 成 为 业界 主流 。 作 为 程序 员 和 网 页 设计 师 来 说 ， 必 须 占 领先 机 ， 迅 速 学 会 
HTML 5 这 门 最 时 尚 也 是 最 强大 的 网 页 标记 技术 。 只 有 这 样 才能 占领 网 页 设计 的 制高点 ， 才 能 最 迅速 
地 为 用 户 开发 出 更 加 强大 的 应 用 。 


4.1.1 ”漫漫 发 展 历程 


HTML 最 近 的 一 次 升级 是 1999 年 12 月 发 布 的 HTML 4.01。 自 那 以 后 ， 发 生 了 很 多 事 。 最 初 的 浏 
览 器 战争 已 经 结束 ，Netscape K KAK, IE 5 作为 赢家 后 来 又 发 展 到 IE 6、IE 7、IE 8。Mozilla Firefox 
从 Netscape 的 死 灰 中 诞生 , 并 跃 居 第 二 位 。 苹果 和 Google 各 自 推 出 自己 的 浏览 器 , MRE Opera 
仍然 嘿嘿 喻 喻 地 活着 ， 并 以 推动 Web 标准 为 己 命 。 我 们 甚至 在 手机 和 游戏 机 上 有 了 真正 的 Web 体验 ， 
这 都 得 益 于 Opera. iPhone 以 及 Google 推出 的 Android. 

然而 这 一 切 ， 仅 让 Web 标准 运动 变 得 更 加 混乱 ，HTML 5 和 其 他 标准 被 束之高阁， 结果 HTML 5 
一 直 以 来 都 是 以 草案 的 面目 示人 。 于 是 一 些 公司 联合 起 来 ， 成 立 了 一 个 叫做 Web Hypertext Application 
Technology Working Group (WHATWG, Web 超 文 本 应 用 技术 工作 组 ) 的 组 织 ， 他 们 将 重新 捡 起 HTML 5 
这 个 神圣 的 课题 。 这 个 组 织 独立 于 W3C,， 成 员 来 自 Mozilla, KHTML/WebKit 项 目 组 、Google、Apple、 
Opera 以 及 微软 。 由 此 可 以 论证 ，HTML 5 必 将 是 将 来 网 页 设计 的 标准 ， 也 将 是 最 绚丽 的 新 技术 。 


4.1.2 无 与 伦比 的 体验 


HTML 5 作为 全 新 的 版 本 ， 为 开发 人 员 带 来 全 新 的 功能 ， 通 过 这 些 新 功能 可 以 为 浏览 用 户 提供 无 
与 伦比 的 用 户 体验 。 


第 4 章 HTML 5 在 移动 设备 


1. 激动 人 心 的 部 分 


COD 全 新 的 、 更 加 合理 的 Tag 
多 媒体 对 象 将 不 再 全 部 绑 定 在 Object 或 Embed Tag 中 ,而 是 视频 有 视频 的 Tag, 音频 有 音频 的 Tago 
(2) 本 地 数据 库 
这 个 功能 将 内 嵌 一 个 本 地 的 SQL 数据 库 ， 以 加 速 交 互 式 搜索 、 缓 存 以 及 索引 功能 。 同 时 ， 那 些 离 
线 Web 程序 也 将 因此 获 益 菲 浅 。 
(3) Canvas 对 象 将 给 浏览 器 带 来 直接 在 上 面 绘制 矢量 图 的 能 力 
这 意味 着 可 以 脱离 Flash 和 Silverlight， 直 接 在 浏览 器 中 显示 图 形 或 动画 。 一 些 最 新 的 浏览 器 ， 除 
了 下， 已 经 开始 支持 Canvas。 通 过 Canvas 提供 的 API 可 以 实现 浏览 器 内 的 编辑 、 拖 放 ， 以 及 各 种 图 
形 用 户 界面 的 能 力 。 并 且 从 HTML 5 开始 ， 内 容 修饰 Tag 被 剔除 ， 而 统一 使 用 CSS. 


2. 新 规则 


HTML 5 建立 了 如 下 新 规则 。 
新 特性 应 该 基于 HTML. CSS. DOM 以 及 JavaScript. 
减少 对 外 部 插件 的 需求 ， 如 Flash. 
更 优秀 的 错误 处 理 。 
更 多 取代 脚本 的 标记 。 
HTML 5 应 该 独立 于 设备 。 
开发 进程 应 对 公众 透明 。 


回 
回 
回 
[ra 
z 
回 
3. 新 特性 
在 
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HTMLS 中 增加 了 如 下 主要 的 新 特性 。 

用 于 绘画 的 canvas 元 素 。 

用 于 媒介 回放 的 video 和 audio 元 素 。 

对 本 地 离线 存储 的 更 好 的 支持 。 

新 的 特殊 内 容 元 素 ， 如 article、footer、header、nav、section 。 
新 的 表单 控件 ， 如 calendar、date、time、email、url、search。 


42 Æ Android 设备 中 使 用 HTML 5 


Ga 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 4 章 \ 在 Android 设备 中 使 用 HTML 5.avi 

对 于 传统 的 网 页 设计 人 员 来 说 ， 并 不 是 很 喜欢 在 Web 页 面 中 使 用 HTML 5， 这 是 因为 当前 IE 对 
HTML 5 的 支持 相对 较 少 。 就 目前 的 版 本 而 言 ， 只 有 正 9 对 HTML 5 提供 了 适当 的 支持 。 幸 运 的 是 ， 
随 着 HTML 5 技术 的 不 断 发 展 ，Firefox、Chrome、Opera 和 Safari 等 浏览 器 都 能 为 HTML 5 的 大 部 分 
功能 提供 很 好 的 支持 。 

但 是 对 于 移动 设备 来 说 ，Android 系统 能 够 很 好 地 支持 HTML 5， 这 是 因为 Android 的 默认 浏览 器 
Chrome 是 基于 WebKit 的 ， 而 WebKit 对 HTML 5 有 相当 出 色 的 支持 。 使 用 HTML 5 技术 设计 Web 页 
及 应 用 的 最 大 好 处 是 ， 在 未 来 的 设备 上 仍 能 继续 使 用 它们 。 因 为 就 现在 的 发 展 趋势 看 ， 目 前 在 平板 
电脑 、 手 机 使 用 的 操作 系统 将 来 还 会 发 展 到 更 多 设备 上 ， 如 汽车 、 智 能 电视 、 图 像 播 放 设 备 等 。 


© 


42.1 使 用 HTML 5 设计 移动 网 站 时 需要 考虑 的 问题 


对 于 网 页 设计 师 来 说 ， 不 要 为 移动 网 站 设计 而 迷茫 ， 尽 管 移动 设备 的 种 类 与 日 俱 增 ， 无 论 是 手机 、 平 
板 电 脑 、 网 络 电视 设备 ， 甚 至 一 些 图 像 播放 设备 ， 但 它们 在 所 支持 的 HTML 5 特性 方面 逐渐 变 得 通用 了 。 
在 创建 移动 网 站 时 ， 首 先 需要 确保 设计 的 网 站 能 够 适用 于 所 有 浏览 器 及 操作 系统 ， 也 就 是 说 可 以 在 尽 
量 多 的 浏览 器 及 操作 系统 中 运行 。 除 此 之 外 ， 在 为 移动 设备 创建 网 站 时 ， 还 需要 考虑 如 下 所 示 的 问题 。 
移动 设备 的 屏幕 尺寸 和 分 辩 率 。 
移动 用 户 需 要 的 内 容 。 
使 用 的 HTML、CSS 及 JavaScript 是 否 有 效 且 简洁 。 
网 站 是 否 需要 为 移动 用 户 使 用 独立 域名 。 
回 ”网 站 需要 通过 怎样 的 测试 。 


422 主流 的 移动 设备 屏幕 的 分 辨 率 


在 当前 的 市 面 中 ， 智 能 手机 的 屏幕 尺寸 主要 包括 如 下 所 示 的 几 种 标准 。 
128x160px. 
176x220px. 
240x320px. 
320x480px. 
400x800px。 
480x800px。 
960x800px。 
1080x1920px。 
就 手机 的 尺寸 而 言 , Android 给 出 了 一 个 具体 的 统计 , 详情 请 参阅 http://developer.android.conyresources/ 
dashboard/screens.html， 如 图 4-1 所 示 。 


ARAARA 
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m | madpi tvdpi hdpi m xxhdpi Total 
Small 99x 01% 
Normal 01% 16.0% 36.0% 24.5% 3.3% 79.9% 
Large 0.6% 30x 1.0% 04% 0.6% 5.6% 
Xlarge 42% 02% 01% 45% 
Total 10.6% 23.2% 10x 367% 25.2% 33% 


me 


4-1 Android 设备 屏幕 尺寸 的 市 场 占有 率 
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由 此 可 见 ， 在 目前 市 面 中 主要 是 以 分 辨 率 为 800x480 和 854x480 的 手机 用 户 居多 。 

另外 ， 作 为 另 一 种 主流 移动 设备 的 平板 电脑 来 说 ， 它 不 仅 拥有 更 大 的 屏幕 尺寸 ， 而 且 在 浏览 方式 
上 也 有 所 不 同 。 例 如 ， 大 部 分 平板 电脑 《〈 以 及 一 些 智能 手机 ) 都 能 够 以 横向 或 纵向 模式 进行 浏览 。 这 
样 即使 在 同一 款 设备 中 ， 屏 幕 的 宽度 有 时 为 1024px， 有 时 则 为 800px 或 更 少 。 但 是 一 般 来 说 ， 平 板 电 
脑 为 用 户 提供 了 更 大 的 屏幕 空间 ， 可 以 认为 在 大 部 分 平板 电脑 设备 的 屏幕 尺寸 为 最 主流 的 〈1024 一 
12800 x (600—800) px。 事 实证 明 ， 在 平板 电脑 中 可 以 很 轻松 地 以 标准 格式 浏览 大 部 分 网 站 ， 这 是 因 
为 其 浏览 器 使 用 起 来 就 像 在 计算 机 显示 器 上 使 用 一 样 简单 ， 并 且 通 过 Android 系统 中 的 缩放 功能 可 以 
放大 难以 阅读 的 微小 区 域 。 


42.3 ”使 用 标准 的 HTML, CSS 和 JavaScript 技术 


在 开发 移动 网 站 时 ， 只 有 使 用 正确 的 、 标 准 格式 的 HTML. CSS 和 JavaScript 技术 ， 才 能 让 页 面 
在 大 部 分 移动 设备 中 适用 。 另 外 ， 设 计 师 可 以 通过 HTML 的 有 效 验证 来 确认 它 是 否 正确 ， 具 体验 证 方 
法 是 登录 http://validator.w3.org/， 使 用 W3C 验证 器 检查 HTML, XHTML 以 及 其 他 标记 语言 。 除 此 之 
外 ， 它 还 可 以 验证 CSS、RSS， 甚 至 是 页 面 上 的 无 效 链接 。 

在 为 移动 设备 编写 网 页 时 ， 需 要 注意 如 下 所 示 的 5 个 “ 慎 用 ”。 

COD WH HTML 表格 

由 于 移动 设备 的 屏幕 尺寸 很 小 ， 使 用 水 平 滚动 相对 困难 ， 从 而 导致 表格 难以 阅读 ， 应 尽量 避免 在 
移动 布局 中 使 用 表格 。 

(2) 慎 用 HTML 表格 布局 

在 Web 页 面 布局 中 ,不 建议 使 用 HTML 表格 ， 而 且 在 移动 设备 中 ， 这 些 表格 会 让 页 面 加 载 速 度 变 
慢 ， 并 且 影 响 美 观 ， 尤 其 是 在 它 与 浏览 器 窗口 不 匹配 时 。 在 页 面 布局 中 通常 使 用 的 是 嵌 套 表格 ， 这 类 
表格 会 让 页 面 加 载 速度 更 慢 ， 并 且 让 演 染 过 程 变 得 更 困难 。 

(3) 慎 用 弹出 窗口 

通常 来 讲 ， 弹 出 窗口 很 讨厌 ， 而 在 移动 设备 上 它们 甚至 能 让 网 站 变 得 不 可 用 。 有 些 移动 浏览 器 并 
不 支持 弹出 窗口 ， 还 有 一 些 浏览 器 则 总 是 以 意料 之 外 的 方式 打开 它们 (通常 会 关闭 原 窗口 ， 然 后 打开 
新 窗口 ) 。 

(4) 慎 用 图 片 布局 

与 在 页 面 布 局 中 使 用 表格 类 似 ， 加 入 隐藏 图 像 以 增加 空间 及 影响 布局 的 方法 经 常会 让 一 些 老 的 移 
动 设 备 死机 或 无 法 正确 显示 页 面 。 另 外 ， 它 们 还 会 增加 下 载 时 间 。 

(5) 慎 用 框架 及 图 像 地 图 (image maps) 

在 目前 的 许多 移动 设备 中 ， 都 无 法 支持 框架 及 图 像 地 图 特性 。 其 实 从 适用 性 上 来 看 ，HTML 5 的 
规范 中 已 经 气 弃 了 框架 (iframe 除外 ) 。 

因为 移动 用 户 通常 需要 为 浏览 网 站 而 耗费 流量 并 需要 付费 ， 所 以 在 设计 移动 页 面 时 应 尽 可 能 地 确 
保 使 用 少 的 HTML 标签 、CSS 属性 和 服务 器 请 求 。 


43 用 HTML 5 设计 移动 网 站 前 的 准备 


Ba 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 4 章 \, 用 HTML 5 设计 移动 网 站 前 的 准备 .avi 
在 使 用 HTML 5 设计 移动 网 站 之 前 ， 需 要 做 两 个 方面 的 准备 : 购买 域名 和 准备 测试 环境 。 本 节 将 
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简要 介绍 这 两 方面 的 基本 知识 。 
4.3.1 为 移动 网 站 准备 专用 的 域名 


在 当前 市 面 中 ， 很 多 网 站 的 移动 版 都 有 一 个 独立 的 域名 ， 移 动用 户 可 以 绕 过 常规 网 站 直接 访问 其 
移动 版 ， 此 类 域名 通常 为 m.example.com。 为 移动 网 站 设置 独立 域名 的 好 处 如 下 所 示 。 
让 移动 用 户 更 容易 找到 该 移动 网 站 。 
为 移动 网 站 的 网 址 进行 独立 宣传 ， 提 高 访问 量 。 
平板 电脑 和 智能 手机 用 户 通 过 更 改 域名 的 方式 便 可 以 访问 常规 网 站 。 
便于 网 站 维护 ， 可 以 通过 完全 独立 的 页 面 手动 创建 移动 域名 ， 或 使 用 内 容 管 理 系统 。 


注意 : 申请 免费 域名 和 免费 空间 的 过 程 请 参阅 本 书 的 2.5 节 。 
4.3.2 ”准备 测试 环境 
在 编写 移动 网 站 时 ， 应 当 在 尽 可 能 多 的 移动 设备 上 进行 测试 工作 。 尽 管 开发 人 员 可 以 使 用 不 同济 


览 器 或 模拟 不 同 的 屏幕 尺寸 来 测试 ， 但 若 不 直接 在 移动 设备 上 进行 测试 ， 仍 然 可 能 会 出 现 如 下 所 示 的 
情况 。 


ARARA 


无 法 正确 加 载 图 像 ， 或 完全 无 法 加 载 图 像 。 
无 法 运行 需要 的 特定 设备 的 功能 。 
因为 移动 运营 商 的 数据 包 大 小 限制 ， 使 得 无 法 加 载 页 面 或 图 像 。 
无 法 水 平 深 动 。 
不 支持 文件 格式 。 
为 了 解决 上 述 问题 ， 笔 者 提出 如 下 所 示 的 两 种 解决 方案 。 
(1) 使 用 模拟 器 
许多 移动 设备 都 有 在 线 或 离线 模拟 器 ， 其 中 大 部 分 是 免费 的 ， 可 以 通过 它们 进行 一 些 基础 测试 。 
在 本 书 的 第 1 章 中 ， 已 经 讲解 了 使 用 模拟 器 的 方法 。 
(2) 使 用 不 同 的 设备 
可 以 租用 或 者 购买 不 同 手机 来 测试 设计 的 网 站 在 手机 上 的 表现 。 但 是 这 种 方式 的 花费 比较 大 ， 特 
别 是 购买 不 同 设备 就 需要 耗费 不 菲 的 资金 。 
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«65€ HTML 5 的 整体 架构 


标记 是 HTML 页 面 中 常用 的 基本 元 素 ,是 HTML 页 面 的 重要 组 成 部 分 。 通 过 这 些 标记 ， 可 以 在 网 
页 产生 各 种 指定 显示 效果 。 本 章 将 详细 讲解 HTML 5 中 与 整体 架构 相关 的 标记 ， 并 介绍 这 些 标记 的 具 
体 使 用 方法 。 


5] 设置 网 页 头 部 元 素 


Gu 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 5 章 \ 设 置 网 页 头 部 元 素 .avi 

网 页 头 部 位 于 网 页 的 顶部 ， 用 来 设置 和 网 页 相关 的 信息 ， 如 页 面 标题 、 关 键 字 和 版 权 等 信息 。 当 
页 面 执行 后 ， 不 会 在 页 面 正 文中 显示 头 部 元 素 信息 。 在 HTML 5 H, head 元 素 是 所 有 头 部 元 素 的 容器 。 
通过 位 于 <head> 内 部 的 元 素 ， 可 以 使 脚本 、 指 引 浏览 器 找到 样式 表 和 元 信息 等 。 在 head 部 分 可 以 包含 
如 下 所 示 的 标签 。 
<base>。 
<link>。 


<meta>。 


<script>。 
<style>。 
<title>。 


本 节 将 详细 讲解 HTML 5 中 和 头 部 元 素 相 关 的 知识 。 
5.1.4. 设置 文档 类 型 


文档 类 型 (DOCTYPE) 决定 了 当前 页 面 所 使 用 标记 语言 (HTML R XHTML) 的 版 本 ， 合 理 选 择 
当前 页 面 的 文档 类 型 是 设计 标准 Web 页 面 的 基础 。 只 有 定义 了 页 面 的 文档 类 型 后 ， 页 面 里 的 标记 和 
CSS 才 会 生效 。 

在 HTML 5 中 ，<!DOCTYPE> 的 声明 必须 位 于 HTML 5 文档 中 的 第 一 行 ， 也 就 是 位 于 <html> s 
签 之 前 。 该 标签 告知 浏览 器 文档 所 使 用 的 HTML 规范 。 

对 <!DOCTYPE> 的 声明 不 属于 HTML 标签 ， 它 仅 是 一 条 指令 ， 目 的 是 告诉 浏览 器 编写 页 面 所 用 的 
标记 的 版 本 。 

在 HTML 4.01 中 ，<!DOCTYPE> 需 要 对 DTD 进行 引用 ， 因 为 HTML 4.01 基于 SGML. ifj HTML 5 
不 基于 SGML， 因 此 不 需要 对 DTD 进行 引用 ， 但 是 需要 doctype 来 规范 浏览 器 的 行为 〈 让 浏览 器 按照 
它们 应 该 的 方式 来 运行 ) 。 
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iC 实例 5-1: 介绍 HTML 头 部 元 素 的 使 用 方法 
- 源码 路 径 : 光盘 :\codes\5\1 .html 


实例 文件 1.html 的 主要 代码 如 下 。 


<IDOCTYPE HTML> 

<html> 

<head> 

<title>Title of the documents /title> 
</head> 

<body> 

</body> 

</html> 


在 上 述 实例 中 实现 文档 类 型 设置 的 是 首 行 代码 ， 用 DOCTYPE 标记 表示 。 执 行 后 的 效果 如 图 5-1 
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图 5-1 执行 效果 
从 图 5-1 的 执行 效果 可 以 看 出 ， 网 页 的 文档 类 型 不 是 十 分 重要 ， 不 会 在 页 面 的 正文 中 显示 。 在 创 

建 的 任何 HTML 文档 的 开头 部 分 ， 都 应 该 首先 声明 文档 类 型 定义 (DTD) 。 
注意 : 在 HTML 4.01 中 有 如 下 3 个 不 同 的 文档 类 型 。 

过 渡 性 文档 类 型 : 要 求 不 严格 ， 允 许 使 用 HTML 4.01 标 识 。 

严格 的 文档 类 型 : 要 求 比较 严格 ， 不 允许 使 用 任何 表现 层 的 标识 和 属性 。 

框架 性 文档 类 型 : 是 专门 针对 框架 页 面 所 使 用 的 文档 类 型 。 

而 在 HTML 5 中 只 有 一 个 : 

<IDOCTYPE HTML> 


5.1.2 ”设置 所 有 链接 规定 默认 地 址 或 默认 目标 


在 HTML 5 中 ， 使 用 <base> 标 签 可 以 为 页 面 上 的 所 有 链接 规定 默认 地 址 或 默认 目标 。 在 通常 情况 
下 ， 浏 览 器 会 从 当前 文档 的 URL 中 提取 相应 的 元 素来 填写 相对 URL 中 的 空白 。 使 用 <base> 标 签 可 以 
改变 这 一 点 ,浏览 器 随后 将 不 再 使 用 当前 文档 的 URL, 而 使 用 指定 的 基本 URL 来 解析 所 有 的 相对 URL, 
包括 <a>、<img>、<link>、<form> 标 签 中 的 URL. 

1E HTML 5 中 规定 ， 必 须 将 <base> 标 签 用 在 head 元 素 内 部 。 例 如 假设 图 像 的 绝对 地 址 是 : 


«img src="http://www.topchuban001 .com/i/pic.gif" /> 


e. 
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接 下 来 在 页 面 中 的 head 部 分 插入 <base> 标 签 ， 规 定 页 面 中 所 有 链接 的 基准 URL: 


<head> 

«base href-"http://www.topchuban001.com/i/" /> 

</head> 

这 样 当 在 上 述 页 面 插入 图 像 时 ， 必 须 规定 相对 地 址 ， 浏 览 器 会 寻找 文件 所 使 用 的 完整 URL: 
<img src-"pic.gif" /> 


注意 : 在 一 个 文档 中 ， 最 多 能 使 用 一 个 <base> 元 素 。 建 议 把 <base> 标 签 排 在 head 元 素 中 第 一 个 元 素 的 位 
置 ， 这 样 head 中 其 他 元 素 就 可 以 利用 <base> 元 素 中 的 信息 了 。 


5.1.3 ”链接 标签 

在 HIML 5 中 , <link> 标 签 用 于 定义 文档 与 外 部 资源 之 间 的 关系 。 例 如 用 下 面 的 代码 可 以 链接 到 一 
个 名 为 style.css 的 外 部 样式 表 。 

<head> 

«link rel="stylesheet" type="text/css" href-"style.css" /> 

</head> 

虽然 目前 所 有 的 主流 浏览 器 都 支持 <link> 标 签 ， 但 是 在 HTML 5 中 不 再 支持 HTML 4.01 的 某 些 属 
Tk. HTML 5 中 的 新 属性 如 表 5-1 所 示 。 

表 5-1 HTML 5 中 的 新 属性 


m 性 值 描述 
charset char encoding 定义 文档 的 字符 编码 
href URL 规定 被 链接 文档 的 位 置 
hreflang language code 规定 被 链接 文档 中 文本 的 语言 
media media que 规定 被 链接 文档 将 被 显示 在 什么 设备 上 
alternate 
author 
help 
icon 
licence 
next 
rel EN 规定 当前 文档 与 被 链接 文档 之 间 的 关系 
prefetch 
prev 
search 
sidebar 
stylesheet 
tag 
sizes a 规定 被 链接 资源 的 尺寸。 仅 适用 于 rel"icon" 
ype MIME type 规定 被 链接 文档 的 MIME 类 型 
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<link> 标 签 支持 HTML 5 中 如 表 5-2 所 示 的 全 局 属性 。 
表 5-2 HTML 5 中 新 的 全 局 属性 


属 性 do xk 
accesskey: 规定 访问 元 素 的 键盘 快捷 键 
class 规定 元 素 的 类 名 《用 于 规定 样式 表 中 的 类 ) 
contenteditable 规定 是 否 允 许 用 户 编辑 内 容 
contextmenu 规定 元 素 的 上 下 文 菜单 
dir 规定 元 素 中 内 容 的 文本 方向 
draggable 规定 是 否 允 许 用 户 拖 动 元 素 
dropzone 规定 当 被 拖 动 的 项 目 /数据 被 拖 放 到 元 素 中 时 会 发 生 什么 
hidden 规定 该 元 素 是 无 关 的 。 被 隐藏 的 元 素 不 会 显示 
id 规定 元 素 的 唯一 ID 
lan; 规定 元 素 中 内 容 的 语言 代码 
spellcheck 规定 是 否 必须 对 元 素 进行 拼写 或 语法 检查 
style 规定 元 素 的 行内 样式 
tabindex 规定 元 素 的 Tab 键 控制 次 序 
title 规定 有 关 元 素 的 额外 信息 
5.1.4 设置 有 关 页 面 的 元 信息 


TE HTML 5 中 ， 可 以 使 用 <meta> 标 签 设置 有 关 页 面 的 元 信息 (meta-information) ， 如 针对 搜索 引 
擎 和 更 新 频 度 的 描述 和 关键 词 。<meta> 标签 位 于 文档 的 头 部 ， 在 里 面 不 包含 任何 内 容 。<meta> 标签 
的 属性 定义 了 与 文档 相关 联 的 “名 称 / 值 ”对 。 

在 全 新 的 HTML 5 中 ， 不 再 支持 属性 sheme， 而 是 增加 了 一 个 新 的 属性 : charset， 此 属性 可 以 使 
字符 集 的 定义 更 加 容易 。 在 HTML 4.01 中 必须 用 如 下 写法 。 

«meta http-equiv-"content-type" content-"text/html; charset=ISO-8859-1"> 


而 在 HTML 5 中 只 需 用 如 下 写法 即 可 实现 相同 的 功能 。 


«meta charset-"ISO-8859-1"» 


例如 通过 下 面 的 代码 定义 了 针对 搜索 引擎 的 关键 词 。 

«meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> 
而 通过 下 面 的 代码 定义 了 对 页 面 的 描述 。 

«meta name="description" content=" 欢 迎 学 习 web 技术 " /> 

通过 下 面 的 代码 定义 了 页 面 的 最 新 版 本 。 

«meta name="revised" content-"David, 2012/12/8/" /> 


通过 下 面 的 代码 可 以 设置 每 5 秒 刷 新 一 次 页 面 。 


e. 
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«meta http-equiv-"refresh" content-"5" /> 
5.1.5. 定义 客户 端 脚本 


在 HTML 5 中 ，<script> 标签 用 于 定义 客户 端 脚 本 ， 如 JavaScript. script 元 素 既 可 包含 脚本 语句 ， 
也 可 以 通过 sre 属性 指向 外 部 脚本 文件 。JavaScript 通常 用 于 图 像 操作 、 表 单 验证 以 及 动态 内 容 更 改 。 
例如 通过 下 面 的 JavaScript 代码 可 以 在 页 面 中 输出 文字 Hello World。 
«script type="text/javascript"> 
document.write("Hello World!") 
</script> 
1E HTML 4 中, 属性 type 是 必需 的 , ME HTML 5 中 是 可 选 的 。 另 外 , 在 HTML 5 中 新 增 了 async 
属性 ， 并 且 在 HTML 5 中 不 再 支持 HTML 4.01 中 的 某 些 属性 。 
如 果 使 用 src 属性 ， 则 <script> 元 素 必 须 是 空 的 。 其 实在 HTML 5 中 有 多 种 执行 外 部 脚本 的 方法 ， 
具体 说 明 如 下 。 
(1) 如 果 async="async": 脚本 相对 于 页 面 的 其 余部 分 异步 地 执行 〈 当 页 面 继续 进行 解析 时 ， 脚 本 
将 被 执行 ) 。 
(2) 如 果 不 使 用 async H. defer="defer": 脚本 将 在 页 面 完 成 解析 时 执行 。 
(3) 如 果 既 不 使 用 async 也 不 使 用 defer: 在 浏览 器 继续 解析 页 面 之 前 ， 立 即 读 取 并 执行 脚本 。 
在 HTML 5 中 ，<script> 标 签 支持 的 属性 如 表 5-3 所 示 。 


表 5-3 ”<script> 标 签 支持 的 属性 


| e | 
| an —— — | 规定 异步 执行 脚本 《〈 仅 适用 于 外 部 脚本 ) 
| df | 


defer 规定 当 页 面 已 完成 解析 后 ， 执 行 脚本 《 仅 适 用 于 外 部 脚 林 ) 
| MMEyp | 规定 脚本 的 MIME 类 型 
规定 在 脚本 中 使 用 的 字符 编码 〈 仅 适用 于 外 部 脚本 ) 


规定 外 部 脚本 的 URL 


值 
ype 


5.1.6 定义 HTML 文档 的 样式 信息 


TE HTML 5 中 , 可 以 使 用 <style> 标 签 定义 HTML 文档 的 样式 信息 。 通 过 <style> 标 签 , 可 以 设置 HTML 
元 素 如 何在 浏览 器 中 呈现 。 例 如 在 实例 5-2 中 ， 演 示 了 在 HTML 文档 中 使 用 <style> 元 素 的 方法 。 


re 实例 5-2: 演示 在 HTML 文档 中 使 用 <style> 元 素 的 方法 
源码 路 径 : 光盘 :\codes\S\2.html 


实例 文件 2.html 的 主要 代码 如 下 。 


<html> 

<head> 

«style type="text/css"> 
h1 {color:red} 


Nasa se 


p {color:blue} 
</style> 
</head> 


<body> 
<h1>Header-1</h1> 
<p> 看 我 的 样式 </p> 
</body> 
</html> 
执行 后 的 效果 如 图 5-2 所 示 。 
€ 23 Q9--el[&-57].9.- fà) m 


Header-1 
看 我 的 样式 


图 5-2 执行 效果 
属性 scoped 是 HTML 5 中 的 一 个 新 属性 ， 它 允许 用 户 为 文档 的 指定 部 分 定义 样式 ， 而 不 是 整个 文 
档 。 如 果 使 用 了 属性 scoped， 那 么 所 规定 的 样式 只 能 应 用 到 style 元 素 的 父 元 素 及 其 子 元 素 。 
注意 : 如 果 未 定义 scoped 属 性 ， 那 么 <style> 元 素 必须 位 于 <head> 部 分 中 。 如 需 链 接 外 部 样式 表 ， 请 使 
用 <link> 标 签 。 


5.1.7 设置 页 面 标题 


设计 的 网 页 需要 有 一 个 标题 ， 且 标题 需要 高 度 概括 这 个 页 面 的 内 容 。 设 置 后 的 标题 不 在 浏览 器 正 
文中 显示 ， 而 在 浏览 器 的 标题 栏 中 显示 。 在 HIML 5 中 ,使 用 <title> 标 签 定义 文档 的 标题 。title 元 素 在 
所 有 HTML 文档 中 是 必需 的 。 

在 页 面 中 定义 页 面 标题 的 代码 如 下 。 

«title» 页面 标题 </title> 

K M | 实例 5-3: 介绍 设置 页 面 标题 的 方法 

e 源码 路 径 : 光盘 :\codes\53.html 


实例 文件 3.html 的 主要 代码 如 下 。 


<html> 

<head> 

<title> 这 里 是 我 的 标题 </title> 
</head> 


<body> 


e. 


第 5 章 HIML 5 的 整体 架构 


</body> 
</html> 


执行 后 的 效果 如 图 5-3 所 示 。 
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图 5-3 执行 效果 
目前 所 有 的 主流 浏览 器 都 支持 <title> 标 签 。 网 页 标题 和 一 本 书 的 书 名 一 样 , 是 整 本 书 所 讲 内 容 的 高 
度 概括 。 读 者 在 看 一 本 书 时 最 先 判断 其 所 讲 内 容 也 是 从 标题 入 手 。 同 样 的 道理 ， 搜 索引 擎 了 解 一 个 网 
页 内 容 也 是 从 标题 入 手 。 搜 索引 擎 读 到 一 个 网 页 的 第 一 部 分 内 容 就 是 标题 ， 只 要 标题 贴切 ， 就 基本 可 
以 通过 网 页 标题 确定 一 个 网 页 的 内 容 。 
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网 页 的 正文 是 网 页 的 主体 ， 通 过 正文 可 以 向 浏览 者 展示 页 面 的 基本 信息 。 正 文 定义 了 网 页 上 显示 
的 主要 内 容 与 显示 格式 ， 是 整个 网 页 的 核心 。 在 HTML 5 中 设置 正文 的 标记 是 <body>...</body>， 其 具 
体 使 用 的 语法 格式 如 下 。 

<body> 页 面 正文 内 容 </body> 

页 面 正文 位 于 头 部 之 后 ，<body> 标 示 正 文 的 开始 ，</body> 标 示 正文 的 结束 。 正 文 body 通过 其 本 
身 的 属性 实现 指定 的 显示 效果 ，body 的 常用 属性 如 表 5-4 所 示 。 

表 5-4 body 常用 属性 列表 


属 性 值 jd x 

background 设置 页 面 的 背景 图 像 

bgcolor 设置 页 面 的 背景 颜色 

text 设置 页 面 内 文本 的 颜色 

link 设置 页 面 内 未 被 访问 过 的 链接 颜色 
vlink 设置 页 面 内 已 经 被 访问 过 的 链接 颜色 
alink 设置 页 面 内 链接 被 访问 时 的 颜色 


body 属性 中 的 颜色 取 值 既 可 以 是 表示 颜色 的 英文 字符 ， 如 red (红色 ) ， 也 可 以 是 十 六 进 制 颜色 


值 ， 如 #9900FF。 
© 
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K 实例 5-4. 设置 网 页 的 正文 
源码 路 径 : 光盘 :\codes\5\4.html 


实例 文件 4.html 的 主要 代码 如 下 。 


<html> 

<head> 

«meta http-equiv-"Content-Type" content-"text/html; charset=gb2312"> 
<title> 无 标题 文档 </title> 

</head> 

<body> 

看 这 页 面 效果 吧 

</body> 

</html> 


执行 后 的 效果 如 图 5-4 所 示 ， 从 显示 效果 中 可 以 看 出 ， EEEE 0 geo Ex 4 
页 面 正文 内 容 将 在 浏览 器 主体 界面 中 显示 。 exem coms 

和 前 面 介绍 的 头 部 元 素 不 同 , 正文 信息 将 在 页 面 的 主体 € o^r cele s Je je] m 
位 置 显示 出 来 。 作 为 网 页 主体 内 容 的 body 部 分 将 直接 显示 看 这 页 面 效果 吧 
在 浏览 器 的 窗口 中 ， 它 里 面 的 内 容 直 接 影响 整个 网 页 的 好 
坏 ， 在 网 页 设计 中 起 着 至 关 重 要 的 作用 。 

在 开始 编写 具体 页 面 内 容 之 前 , 需要 对 页 面 进行 整体 的 
基本 规划 和 设置 ， 例 如 整个 页 面 的 背景 色 、 背 景 图 案 、 前 景 
(文字 ) 色 、 页 面 “ 左 /上 ” 边 距 大 小 等 。 在 HTML 中 ， 需 
要 用 表 5-4 内 指定 参数 来 设置 。 要 想 在 正文 中 显示 不 同 的 文 
本 内 容 ， 可 以 直接 在 代码 中 的 <body>...</body> 标 记 之 间 修 改 为 所 需要 的 内 容 即 可 。 


图 5-4 执行 效果 
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注释 是 编程 语言 和 标记 语言 中 不 可 缺少 的 要 素 。 通 过 注释 不 但 可 以 方便 用 户 对 代码 的 理解 ， 并 且 
可 以 便于 系统 程序 的 后 续 维 护 。 在 HTML 中 插入 注释 的 语法 格式 如 下 。 


区 实例 5-5: 为 实例 5-4 中 的 网 页 4.html 添加 注释 
源码 路 径 : 光盘 :\codes\s\5 .html 


实例 文件 5.html 的 主要 代码 如 下 。 


<html> 

<head> 

«meta http-equiv-"Content-Type" content-"text/html; charset=gb2312"> 
<title> 无 标题 文档 </title> 

</head> 


e. 
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<body> 
看 这 页 面 效果 吧 <- 页 面 正文 内 容 --> 
</body> 
</html> 


执行 效果 如 图 5-5 所 示 。 


eno elm- 8 |i -| iiie i 
看 这 页 面 效 果 吧 


图 5-5 执行 效果 
要 输入 注释 信息 ， 首 先 输入 一 个 小 于 号 “<”， 然 后 紧 接 着 输入 一 个 感叹 号 “!”， 要 注意 的 是 ， 
在 小 于 号 和 感叹 号 之 间 不 能 有 空格 ， 之 后 是 两 条 短线 “--”， 即 下 面 的 格式 : 
<l-- 
接 下 来 输入 注释 或 说 明 信 息 ， 然 后 再 输入 两 条 短线 “--” 和 一 个 大 于 号 “>”， 这 样 就 完成 了 一 个 
注释 信息 的 添加 。 例 如 下 面 的 格式 : 
<l--This is a comment— 


在 此 需要 注意 的 是 ， 因 为 两 条 短线 “--” 和 一 个 大 于 号 “>” 用 来 表示 注释 的 终止 ， 所 以 不 要 在 注 
释 的 内 容 中 加 入 字符 串 “-->”。 
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GB 知识 点 讲解 : 光盘 \ 视 频 讲解 第 5 章 \ 和 页 面 结构 相关 的 新 元 素 .avi 
在 全 新 的 HTML 5 中 ， 新 增 了 几 个 和 页 面 结构 相关 的 新 元 素 。 本 节 将 重点 讲解 这 几 个 新 元 素 的 基 
本 知识 ， 为 读者 步 入 本 书后 面 知识 的 学 习 打 下 基础 。 


5.4.1 定义 区 段 的 标签 


在 全 新 的 HTML 5 中 ，<section> 标 签 用 于 定义 文档 中 的 节 〈section、 区 段 ) ， 例 如 章节 、 页 眉 、 
页 脚 或 文档 中 的 其 他 部 分 。 例 如 通过 下 面 的 代码 在 页 面 中 定义 了 一 个 区 域 。 


«section» 

«h12PRC«/h1» 

<p> 中 华人 民 共 和 国 万 岁 </p> 
</section> 


<section> 标 签 是 HTML 5 中 的 新 标签 , 其 属性 cite 的 值 为 URL, 此 值 表示 section 的 URL。<section> 


E 


标签 支持 表 5-4 中 列 出 的 HTML 5 中 的 全 局 属性 。 
5.4.2 ”定义 独立 内 容 的 标签 


在 全 新 的 HTML 5 中 ,使 用 <article> 标 签 可 以 定义 独立 的 页 面 内 容 。 在 现实 应 用 中 ,通常 在 如 下 情 
形 使 用 <article> 标 签 。 

ED dm. 

E dix. 

回 ”博客 条 目 。 

E “用户 评 论 。 

E |] 实例 5-6: 在 网 页 中 使 用 <article> 标 答 

源码 路 径 : 光盘 :\codes\5\6.html 


实例 文件 6.html 的 主要 代码 如 下 所 示 。 


«IDOCTYPE HTML» 

«html 

<body> 

<article> 

<a href="http://www.apple.com">iphone</a><br /> 

公元 2012 年 9 月 ， 全 新 一 代 的 iPhone 5 发 布 ， 首 先 登 录 美国 市 场 ， 然 后 欧洲 七 国 .…… 
</article> 


</body> 
</html> 


执行 效果 如 图 5-6 所 示 。 
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iphone 
COSS Miei 全 新 一 代 的 iPhone 5 发 布 ， 首 先 登录 美国 市 场 


图 5-6 执行 效果 


<article> 标 签 的 内 容 独 立 于 文档 的 其 余部 分 ，<article> 标 签 支持 表 5-4 中 列 出 的 HTML 5 中 的 全 局 
属性 。 


54.3 ”定义 导航 链接 标签 
在 全 新 的 HTML 5 中 ，<nav> 标 签 用 于 定义 导航 链接 的 部 分 。 


e. 


C 实例 5-7: 在 网 页 中 使 用 <nav> 标 签 
- 源码 路 径 : 光盘 :\codes\5\7.html 


实例 文件 7.html 的 主要 代码 如 下 。 


<IDOCTYPE HTML> 
<html> 
<body> 


<nav> 
«a href="index.asp"> 主 页 </a> 
<a href="chanpin.asp"> 产 品 </a> 


«a href="news.asp"> 新 闻 </a> 
*Inav» 
</body> 
</html> 
执行 效果 如 图 5-7 所 示 。 
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图 5-7 执行 效果 
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如 果 在 文档 中 有 向 前 或 向 后 的 按钮 ， 则 应 该 把 它 放 到 <nav> 元 素 中 。<nav> 标签 支持 表 5-4 中 列 出 


ffi HTML 5 中 的 全 局 属性 。 
5.4.4 ”定义 其 所 处 内 容 之 外 的 内 容 


在 全 新 的 HTML 5 中 ，<aside> 标 签 用 于 定义 其 所 处 内 容 之 外 的 内 容 。 


源码 路 径 : 光盘 :\codes\5\8.html 


实例 文件 8.html 的 主要 代码 如 下 。 


实例 5-8: 在 网 页 中 使 用 <aside> 标 签 


<IDOCTYPE HTML» 


<html> 
<body> 


<p>AAAAAAA.</p> 


<aside> 


<h4>BBBBBB</h4> 
TCCCCCCCCCCCCC. 


id 移动 网 站 开发 详解 
«Jaside» 


</body> 
</html> 


执行 效果 如 图 5-8 所 示 。 
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5-8 执行 效果 
<aside> 的 内 容 可 用 作文 章 的 侧 栏 ，<aside> 标 签 支持 表 5-4 中 列 出 的 HTML 5 中 的 全 局 属性 。 


5.4.5 ”定义 页 脚 内 容 的 标签 


在 全 新 的 HTML 5 中 ，<footer> 标 签 用 于 定义 section 或 document 的 页 脚 。 


实例 5-9: 在 网 页 中 使 用 <footer> 标 签 
源码 路 径 : 光盘 :\codes\5\9.html 


实例 文件 9.html 的 主要 代码 如 下 。 


<IDOCTYPE HTML» 

<html> 

<body> 

<footer> 这 是 页 脚 部 分 的 内 容 .</footer> 


</body> 
</html> 


执行 效果 如 图 5-9 所 示 。 
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ec 9: -ca-7]e. 
这 是 页 脚 部 分 的 内 容 . 


5-9 执行 效果 


假如 使 用 <footer> 来 插入 联系 信息 ， 应 该 在 <footer> 元 素 内 使 用 <address> 元 素 。<footer> 标 签 支持 表 5-4 
中 列 出 的 HTML 5 中 的 全 局 属性 。 


e. 


第 6 章 体验 基本 元 素 


对 于 全 新 的 HTML 5 来 说 ， 新 增加 了 很 多 标记 元 素 ， 通 过 这 些 新 的 标记 元 素 可 以 实现 以 往 HTML 
所 不 能 实现 的 功能 。 另 外 ， 本 章 还 会 引领 读者 一 起 学 习 HTML 5 中 基本 页 面 元 素 的 使 用 技巧 ， 为 读者 
学 习 本 书后 面 的 知识 打下 基础 。 


6.1 在 页 面 中 输出 一 段 文字 


Ga 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 6 章 \ 在 页 面 中 输出 一 段 文 字 .avi 
我 们 可 以 使 用 传统 的 HTML 段落 标记 <p>...</p> 来 实现 段落 文字 功能 。 请 看 实例 6-1 的 实现 代码 。 


re 实例 6-1: 在 页 面 中 输出 一 段 文 字 
源码 路 径 : 光盘 :\codes\6\1.html 


实例 文件 1.html 的 实现 代码 如 下 。 

<IDOCTYPE HTML> 

«META charset="utf-8"> 

<TITLE> 我 的 第 一 个 HTML 5 页 面 </TITLE> 

<P> 欢 迎 学 习 HTML 5</P> 

通过 短 短 的 几 行 代码 就 完成 了 一 个 页 面 的 开发 ,这 充分 说 明了 HTML 5 语法 的 简洁 性 。 同时 , HTML 5 
并 不 是 一 种 XML 语言 ， 其 语法 非常 随意 。 上 述 程序 中 的 第 一 行 代码 如 下 。 

<I DOCTYPE HTML» 

通过 上 述 几 个 简短 的 字符 ,甚至 不 包括 版 本 号 , 就 能 够 告诉 浏览 器 需要 一 个 doctype 来 触发 标准 模 
式 。 接 下 来 需要 说 明文 档 的 字符 编码 ， 否 则 将 出 现 浏 览 器 不 能 正确 解析 ， 会 导致 安全 隐患 ， 为 此 加 入 
如 下 一 行 代码 。 

<META charset="utf-8"> 

通过 上 述 代 码 指 明了 该 文档 的 字符 编码 。 另 外 ， 因 为 HTML 5 不 区 分 字母 大 小 写 、 标 记 结 束 符 及 
属性 是 否 加 引号 ， 所 以 如 下 3 行 代码 是 完全 等 效 的 。 

«meta charset="utf-8"> 

«META charset-"utf-8" /> 

«META charset-utf-8» 

Tt HTML 5 的 主体 代码 中 ， 可 以 省 略 <html> 与 <body> 标 记 ， 直 接 编写 需要 显示 的 内 容 ， 代 码 如 下 。 

<P> 欢 迎 学 习 HTML 5</P> 


LU Android D RISTER HERE 


虽然 在 编写 代码 时 省 略 了 <html> 与 <body> 标 记 ， 但 在 浏览 器 进行 解析 时 会 自动 进行 添加 。 最 终 的 
执行 效果 如 图 6-1 所 示 。 
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6-1 执行 效果 


62 ”对 页 面 进 行 分 栏 设计 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 对 页 面 进行 分 栏 设计 .avi 

在 大 多 数 情况 下 ， 设 计 师 会 对 页 面 进行 如 下 规划 。 

回 上 部 分 : 显示 导航 。 

回 中 部 分 : 分 成 两 个 部 分 ， 其 中 左边 设置 菜单 ， 右 边 显示 文本 内 容 。 
回 下 部 分 : 显示 页 面 版 权 信息 。 


«IDOCTYPE html» 

<head> 

<meta charset=utf-8> 

<title> 页面 结构 </title> 

<style type="text/css"> 
header,nav,article,footer 
{border:solid 1px #666;padding:5px} 
header{width:500px} 
nav{float:left;width:60px:height:100px} 
article(float:left;width:428px;height:100px) 
footer(clear:both;width:500px] 

</style> 

</head> 

<body> 

<header class="bgColor"> 导 航 部 分 </header> 

<nav> 菜 单 部 分 </nav> 

<article> 内 容 部 分 </article> 

<footer> 底 部 说 明 部 分 </footer> 

</body> 

</html> 


e. 


sos WERARE 000 


在 上 述 代码 中 ， 使 用 HTML 5 的 全 新 元 素 对 页 面 进行 分 栏 设计 ， 执 行 后 的 效果 如 图 6-2 所 示 。 


页 面 结构 - Mozilla Firefox 
文件 四 ”编辑 EE) SF mec SEQ IAV 帮助 0D 
器 页 面 结构 

€ 0 menm el[i-s* Plea a Shl 


导航 部 分 


菜单 部 | 内 容 部 分 
分 


底部 说 明 部 分 


62 ”分 栏 效果 


通过 HTML 5 中 的 新 增 元素 <header>， 可 以 明确 地 告诉 浏览 器 此 处 是 页 头 ，<nav> 标 记 用 来 构建 页 
面 的 导航 ，<article> 标 记 用 于 构建 页 面 内 容 的 一 部 分 ，<footer> 表 明 页 面 已 到 页 脚 或 根 元 素 部 分 ， 并 且 
这 些 标 记 都 可 以 重复 使 用 ， 这 样 提高 了 开发 者 的 工作 效率 。 

除 此 之 外 ， 有 些 新 增 的 HTML 5 元 素 还 可 以 单独 成 为 一 个 区 域 ， 例 如 下 面 的 代码 。 

<header> 

«article» 

<hl> 内 容 |</hl> 

</article> 

</header> 

<header> 

«article» 

<h2> 内 容 2 </h2> 

</article> 

</header> 


TE HTML 5 中 , 通过 <article> 标 记 元 素 可 以 创建 一 个 新 的 节点 , 并且 每 个 节点 都 可 以 有 自己 的 单独 
元 素 ， 这 和 <hl> 或 <h2> 标 记 元 素 的 原理 一 样 。 这 样 做 不 仅 可 以 使 内 容 区 域 各 自分 段 ， 便 于 维护 ， 而 且 
代码 简单 ， 方 便 对 局 部 进行 修改 。 


6.3 ”使 用 <details> 标 记 元 素 实 现 交互 


GR 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 使 用 <details> 标 记 元 素 实现 交互 .avi 

在 HTML 5 中 , <details> 标 记 是 一 个 全 新 的 元 素 , 功能 是 描述 文档 或 文档 某 个 部 分 的 细节 。<details> 
标记 经 常 与 <summary> 元 素 配合 使 用 。 在 默认 情况 下 ， 不 显示 <details> 标 记 中 的 内 容 。 当 与 <summary> 
标记 配合 使 用 时 ， 在 单 击 <summary> 标 记 后 才 会 显示 <details> 元 素 中 设置 的 内 容 。 


6.3.1 常用 属性 


<details> 元 素 的 常用 属性 如 下 。 
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E] open: 值 为 open， 功 能 是 定义 details 是 否 可 见 。 

回 subject: 值 为 sub id， 功能 是 设置 元 素 所 对 应 项 目的 ID 号 。 

回 draggable: 值 为 true 或 false， 功 能 是 设置 是 否 可 以 拖 动 元 素 ， 默 认 值 是 false。 

<details> 标 记 本 质 上 人 允许 用 户 在 单 击 标签 时 显示 和 隐藏 内 容 。 想 必 大 家 一 定 相当 熟悉 这 种 效果 , 但 
是 直到 现在 ， 这 种 效果 还 一 直 是 用 JavaScript 实现 的 。 假 如 在 某 个 头 部 元 素 后 面 有 一 个 箭头 ， 当 单 击 箭 
头 时 ， 下 面 的 附加 信息 将 会 呈现 ， 再 次 单 击 箭头 内 容 消失 。 在 FAQ 在线 问答 ) 页 面 中 经 常 使 用 这 个 
功能 。 


K 实例 6-3: 使 用 <details> 标 记 元 素 实现 交互 
源码 路 径 : 光盘 :\codes\6\3.html 


实例 文件 3.html 的 主要 代码 如 下 。 


<body> 
<span> 隐 藏 </span> 
<details> 
生成 于 2012-05-17 
</details> 
<span> 显 示 </span> 
«details open="open"> 
生成 于 2012-05-17 
</details> 

</body> 


在 上 述 代 码 中 ， 在 页 面 中 使 用 了 一 个 <details> 元 素 ， 通 过 不 设置 该 元 素 的 open 属性 值 与 设置 该 属 
性 值 为 open 进行 比较 ， 并 将 结果 展示 在 页 面 中 。 在 本 实例 中 ,为 了 能 更 好 地 验证 <details> 元 素 的 open 
属性 , 在 页 面 的 样式 中 分 别 定义 了 该 元 素 的 默认 样式 和 显示 状态 的 样式 。 其 中 第 一 个 <details> 使 用 的 默 
认 样 式 ， 第 二 个 使 用 的 open。 


执行 后 的 效果 如 图 6-3 所 示 。 
如 果 单 击 图 6-3 中 “详细 信息 ”前 面 的 小 三 角 符号 ， 则 这 部 分 内 容 将 会 消失 ， 如 图 6-4 所 示 。 
Eri Ez 
Pen 
图 6-3 执行 效果 图 6-4 消失 部 分 内 容 


6.3.2 ”实现 下 拉 弹 出 效果 


在 接 下 来 的 实例 中 ， 首 先 在 页 面 中 显示 一 行 提问 文本 “需要 我 为 您 服务 吗 ? ”， 当 单 击 左 侧 的 小 三 
角 符 号 后 ， 将 在 下 方 无 刷新 弹出 一 个 下 拉 区 域 ， 在 里 面 显示 文本 “非常 需要 .”。 上 述 描述 效果 在 很 多 动 
态 网 站 中 比较 常见 ， 原 来 一 般 都 是 用 JavaScript 技术 或 Ajax 技术 实现 的 。 但 是 现在 只 需 使 用 HTML 5 中 
的 <details> 标 记 元 素 即 可 实现 相同 的 功能 。 


e. 


区 实例 6-4: 使 用 <details> 标 记 实 现下 拉 弹 出 效果 
- 源码 路 径 : 光盘 :\codes\64.html 


实例 文件 4html 的 主要 代码 如 下 。 


<body> 

<details> 
<summary> 需 要 我 为 您 服务 吗 ?</summary> 
<p> 非 常 需要 .</p> 

</details> 

</body> 


在 上 述 代码 中 , 当 需 要 显示 和 隐藏 内 容 时 , 使 用 <details> 元 素 包 括 一 个 <summary> 标 签 , 接着 是 内 容 。 
当 单 击 <summary> 标 签 时 ， 会 以 切换 的 样式 显示 内 容 标签 。 另 外 ， 在 上 述 实例 的 CSS 代码 中 ， 执 行 后 
的 效果 如 图 6-5 所 示 ， 单 击 文字 左 侧 的 小 三 角形 符号 后 ， 在 下 方 无 刷新 弹出 一 个 新 的 区 域 ， 如 图 6-6 


所 示 。 
Y 需要 我 为 您 服务 吗 ? 


| * 需要 我 为 您 服务 吗 ? | ipsam. 
65 “初始 效果 图 6-6 无 刷新 弹出 新 内 容 


64 ”使 用 <summary> 标 记 元 素 实现 交互 


G 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 使 用 <summary> 标 记 元 素 实现 交互 .avi 

在 HTML 5 中 ,标记 <summary> 包 含 了 <details> 元 素 的 标题 ， 元 素 <details> 能 够 描述 有 关 文 档 或 文 
档 片 段 的 详细 信息 。<summary> 是 HTML 5 中 新 增 的 一 个 标记 , 常 包含 于 <details> 元 素 中 , 配合 <details> 
元 素 使 用 。 在 两 者 结合 起 来 使 用 的 代码 中 ，<summary> 元 素 的 功能 是 说 明文 档 的 标题 ，<details> 元 素 的 
功能 是 说 明文 档 的 详细 信息 。<summary> 元 素 是 <details> 元 素 中 的 第 一 个 子 元 素 ， 二 者 经 常 同 时 出 现在 
页 面 中 。 

区 M. | 实例 6.5: 使 用 <summary> 标 记 实现 交互 效果 

源码 路 径 : 光盘 :\codes\6\5.html 


在 本 实例 中 ， 在 页 面 中 分 别 加 入 一 个 <details> 元 素 和 一 个 <summary> 元 素 ， 当 显示 <details> 元 素 内 
容 时 ， 其 子 元 素 <summary> 以 字体 加 粗 的 形式 展示 在 页 面 中 。 实 例文 件 5.html 的 主要 代码 如 下 。 


<body> 
«details open="open"> 
<summary> 页 面 说 明 </summary> 
今天 是 2012 年 9 月 26 日 
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</details> 
</body> 


在 上 述 实例 代码 中 ， 为 了 突出 显示 <summary> 元 素 ， 增 加 了 一 个 加 粗 的 字体 效果 。 从 代码 的 结构 
中 可 以 看 出 ，<summary> 元 素 包 含 在 <details> 元 素 中 ， 是 <details> 元 素 的 子 元 素 ， 应 该 在 摆 放 位 置 时 尽 
量 放 在 第 一 个 。 执 行 后 的 效果 如 图 6-7 所 示 ， 单 击 文字 左 侧 的 小 三 角形 符号 后 ， 所 有 文字 将 隐藏 ， 如 
图 6-8 所 示 。 


HEXA 
今天 是 2012 年 9 月 26 日 


图 6-7 初始 效果 图 6-8 所 有 文字 隐藏 
6.5 ”使 用 <menu> 标 记 元 素 


£u 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 使 用 <menu> 标 记 元 素 .avi 
在 全 新 的 HTML 5 中 ， 除 了 常用 的 内 容 交互 元 素 外 ， 使 用 较为 频繁 的 还 有 菜单 交互 元 素 ， 此 功能 
主要 采用 <menu> 与 <command> 两 个 元 素 实现 。 


6.5.1 属性 介绍 


<menu> 是 HTML 5 中 的 标记 元 素 , 此 元 素 其 实在 HTML 2 时 就 已 经 存在 , 但 是 不 被 HTML 4 支持 。 
现在 在 HTML 5 中 重新 恢复 使 用 ， 并 且 被 赋予 了 全 新 的 功能 。 该 元 素 常 与 <li> 列 表 元 素 结合 使 用 ,用 来 
定义 一 个 列表 式 的 菜单 。<menu> 的 属性 信息 如 表 6-1 所 示 。 


表 6-1 <menu> 的 属性 信息 


autosubmit true/false 如 果 为 tue， 那 么 当 表 单 控件 改变 时 会 自动 提交 


compact compact rendering 不 支持 ， 请 使 用 CSS 代替 

label menulabel 为 菜单 定义 一 个 可 见 的 标注 
context 

type toolbar 定义 显示 哪 种 类 型 的 菜单 ， 默 认 值 是 list 
list 


实例 6-6 的 功能 是 在 页 面 中 通过 <menu> 元 素 列表 显示 3 行 图 文 并 茂 的 文本 选项 。 首 先 添加 了 一 个 
<menu> 元 素 , 在 该 元 素 中 加 入 <li> 列 表 元 素 ; 然后 在 列表 元 素 中 分 别 放置 一 个 <img> 与 一 个 <span> 元 素 ， 
用 于 展示 图 片 与 标题 ; 最 后 使 用 CSS 样式 代码 ， 当 用 户 将 鼠标 指针 移 至 某 个 <li> 元 素 时 ， 展 示 菜 单 中 
某 选 项 被 选中 的 效果 。 
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实例 6-6: 使 用 <menu> 标 记 元 素 实现 菜单 交互 


源码 路 径 : 光盘 :\codes\6\6 html 


实例 文件 6.html 的 主要 代码 如 下 。 
<body> 


<menu> 
«li» 
<img src="1.png"></img> 
<span>Firefox</span> 
«Ili» 
<li> 
<img src="2.png"></img> 
<span>Chrome</span> 
«Ili» 
«li» 
<img src-"3.png"» «/img» 
«span» Safari«/span^ 
«lli» 
</menu> 
</body> 


当 使 用 <menu> 定 义 菜单 列表 时 ， 通 常 使 用 <menu> 元 


素来 定义 菜单 的 框架 ,框架 中 的 内 容 使 用 <li> 元 素来 进行 Bn 
构造 ， 以 形成 列表 形状 。 另 外 ， 为 了 美化 列表 选项 的 展 8 oco. 
示 效 果 ， 需 要 使 用 CSS 样式 来 修饰 ,表示 通过 CSS 样式 Bes 


控制 鼠标 指针 在 移出 与 移入 元 素 时 的 不 同 展示 效果 。 注 


意 菜单 还 可 以 翌 套 在 别 的 菜单 中 ， 形 成 带 层 次 的 菜单 结 
构 。 执 行 后 的 效果 如 图 6-9 所 示 。 


6.5.2 ”实现 右键 菜单 功能 


鼠标 右键 的 功能 非常 强大 ， 在 网 页 中 右 击 后 会 显示 快捷 菜单 ， 例 如 在 
Firefox 网 页 中 右 击 后 会 弹出 如 图 6-10 所 示 的 快捷 菜单 。 
实例 6-7 的 功能 是 为 浏览 器 添加 几 个 右键 菜单 选项 ， 该 功能 可 以 通过 HIML 5 
中 的 <contextmenu>、<menu>、<menuitem> 联 合 实现 。 在 实例 6-6 中 已 经 讲解 
了 <menu> 的 基本 用 法 ， 接 下 来 介绍 <contextmenu> 和 <menuitem> 的 基本 知识 。 
(1) <contextmenu> 
在 HTML 5 中 , 每 个 元 素 新 增 了 一 个 属性 : contextmenu. 属性 contextmenu 
表示 上 下 文 菜单 ， 即 鼠标 右 击 元 素 会 出 现 一 个 菜单 。 
(2) <menuitem> 
在 <menu>...</menu> 内 部 可 以 嵌入 菜单 项 ， 即 <menuitem>...</menuitem>。 
<menuitem> 有 如 下 3 个 属性 。 
回 label: 菜单 项 显示 的 名 称 。 
回 icon: 在 菜单 项 左 侧 显示 的 图 标 。 


图 6-9 执行 效果 


JaIB EY 

BUE: 
重新 载 入 EB) 
EES 
添加 至 快速 拔 号 QD 


将 此 页 加 为 书签 Q0 
页 面 另存 为 Qu 
RENEO 


ZUETABR W 
ESI 


查看 页 面 源 代码 — 
查看 页 面 信息 CD 


查看 元 素 Q) 
EPA CTI , 
6-10 ”网 页 中 的 右键 
快捷 菜单 


(0 Android 移动 网 站 开发 详解 


回 onclick: 单 击 菜单 项 触发 的 事件 。 


C 实例 6-7: 实现 右键 菜单 功能 
b 源码 路 径 : 光盘 :\codes\6\7.html 


实例 文件 7.html 的 主要 代码 如 下 。 


<body> 
<div style='display:inline' contextmenu="mymenu"> 右 击 我 试 试 </div> 


«menu type-"context" id="mymenu"> 
«menuitem label=" 菜 单 1" onclick="alert(' 这 是 菜单 1');" icon-"1.png"» «/menuitem» 
«menuitem label=" 菜 单 2" onclick="alert(' 这 是 菜单 2);" icon="2.png"></menuitem> 
«menu label=" 菜 单 3"> 
«menuitem label=" 菜 单 3-1" icon="3.png" onclick="alert(' 这 是 菜单 3-1):"> 
</menuitem> 
«menu label=" 菜 单 3-2" > 
«menuitem label=" 菜 单 3-2-1" icon="123.png" onclick="alert(' 这 是 菜单 3-2-1):"> 
</menuitem> 
</menu> 
</menu> 
</menu> 
</body> 


运行 网 页 后 ， 当 右 击 <div> 时 就 会 出 现 菜单 效果 ， 如 图 6-11 所 示 。 
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图 6-11 运行 效果 
注意 : 目前 只 有 Firefox 浏 览 器 支持 上 述 功能 效果 。 


6.6 1£&)8 «command» 443670 X 


ER 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 使 用 <command> 标 记 元 素 .avi 
在 HTML 5 中 ，<command> 是 一 个 新 增 的 标记 元 素 ， 功 能 是 定义 各 种 类 型 的 命令 按钮 。 利 用 该 标 
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记 的 url 属性 可 以 添加 图 片 ， 并 且 实 现 图片 按 钮 效果 。 另 外 ， 通 过 改变 标记 中 的 type 属性 值 ， 可 以 定 
义 复 选 框 或 单 选 按钮 。<command> 元 素 包含 的 属性 及 描述 信息 如 表 6-2 所 示 。 


表 6-2 <command> 元 素 包含 的 属性 及 描述 信息 


属 性 值 dà xk 

checked checked 定义 是 否 被 选中 ， 仅 用 于 radio 或 checkbox 类 型 

disabled disabled 定义 command 是 否 可 用 

icon url 定义 作为 command 来 显示 的 图 像 的 url 

label text 73 command 定义 可 见 的 label 

radiogroup groupname 定义 command 所 属 的 组 名 ， 仅 在 类 型 为 radio 时 使 用 
checkbox 

type command 定义 该 command 的 类 型 ， 默 认 是 command 
Tadio 


注意 : 虽然 各 浏览 器 对 HTML 5 兼容 性 都 进行 了 很 好 的 支持 ， 但 毕竟 不 可 能 照顾 到 每 个 元 素 的 全 部 属性 ， 
例如 <command> 元 素 就 有 许多 属性 不 能 被 浏览 器 支持 ， 因 此 ， 所 提 到 的 功能 也 只 是 HTML 5 元 素 
所 具有 的 功能 ， 暂 时 还 不 能 真正 执行 ， 但 随 着 各 大 浏览 器 厂商 对 HTML 5 的 兼容 性 力度 的 加 强 ， 
这 种 暂时 不 兼容 的 问题 终 将 解决 。 


<command> 能 够 定义 各 种 类 型 的 按钮 ， 例 如 命令 按钮 、 单 选 按钮 、 图 片 按钮 ， 另 外 也 能 够 定义 复 
选 框 。 如 果 <command> 元 素 与 <menu> 元 素 结合 使 用 ， 可 以 在 网 页 中 实现 弹出 式 的 下 拉 菜 单 。 当 单 击 菜 
单 中 的 某 个 选项 时 ， 将 执行 相应 的 操作 。 

在 实例 6-8 的 页 面 中 ， 分 别 添加 一 个 <menu> 元 素 和 两 个 <command> 元 素 ， 并 将 <command> 元 素 包 
含 在 <menu> 中 。 当 单 击 其 中 一 个 <command> 元 素 时 会 弹出 一 个 对 话 框 ， 并 且 显 示 对 应 操作 的 内 容 。 

区 < | 实例 6-8: 使 用 <command> 标 记 元 素 实 现 动态 对 话 框 效果 

源码 路 径 : 光盘 :\codes\6\8.html 


实例 文件 8.html 的 主要 代码 如 下 。 


<body> 
<menu> 
«command onClick-"command _click( 文 件 ')"> 文 件 </command> 
«command onClick="command_click(' 打 开 ')"> 打 开 </command> 
<command icon-"Images/chrome.png" label=" 带 图 片 的 按钮 "></command> 
</menu> 
«div id="dialog"> 
«div class="title"> 
«div class="fleft"> 提 示 </div> 
«div class="fright"> 关 闭 </div> 
</div> 
<div class="content"> 
«div id="divTip"> 中 ...</div> 
</div> 
</div> 
«script type="text/javascript"> 
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function command click(strS)t 
document.getElementsByName("command").disabled-"disabled" 
document.getElementByld("dialog").style.display-"block"; 
var strContent=" 正 在 操作 <font color=red> "«strS*" </font> 选 项 "; 
document.getElementByld("divTip").innerHTML -strContent; 
dus 
</body> 
在 上 述 代码 中 ，<command> 标 记 元 素 被 包含 在 <menu> 元 
素 中 ， 同 时 为 了 使 元 素 显示 手 状 的 被 单 击 效果 ， 加 入 了 如 样 文件 
式 中 粗 体 所 示 的 代码 。 另外， 当 <command> 元 素 被 单 击 时 弹 am 
出 一 个 显示 操作 内 容 的 对 话 框 ， 具 体内 容 是 JavaScript 代码 
中 的 部 分 ， 如 图 6-12 所 示 。 
其 实 <command> 元 素 除 了 可 以 触发 onClick 事件 外 ， 还 6-12 执行 效果 
可 以 通过 icon 属性 设置 按钮 图 片 ， 例 如 下 面 的 代码 。 


«command icon-"Images/chrome.png" label=" 有 图 的 按钮 ”></command> 

通过 上 述 代码 创建 了 一 个 带 图 片 的 <command> 元 素 ， 并 且 指 定 了 元 素 的 名 称 是 “有 图 的 按钮 ”。 
另外 ， 还 可 以 通过 JavaScript 代码 控制 <command> 元 素 的 disabled 属性 ， 例 如 下 面 的 代码 。 

«script type-"text/j avascript"> 


</script> 


上 述 JavaScript 代码 的 功能 是 ， 禁 止 单 击 全 部 的 <command> 元 素 。 将 上 述 代码 放置 在 单 击 
<command> 元 素 操作 某 项 功能 的 后 面 ， 可 以 防止 用 户 反 复 单 击 或 提示 用 户 按钮 已 经 单 击 成 功 。 


6.7 使 用 <progress> 标 记 元 素 


Ge 知识 点 讲解 ; 光盘 \ 视 频 讲解 \ 第 6 章 \ 使 用 <progress> 标 记 元 素 .avi 

在 全 新 的 HTML 5 中 ,可 以 使 用 <progress> 标 记 元 素 实现 进度 条 效果 。 当 页 面 与 用 户 进行 数据 交互 
时 ， 为 了 增强 用 户 的 UI 体验 ， 通 过 进度 条 效果 显示 页 面 中 各 种 进度 状态 。<progress> 元 素 是 HTML 5 
中 新 增 的 状态 交互 元 素 ， 用 来 表示 页 面 中 某 个 任务 完成 的 进度 。 例 如 在 下 载 一 个 文件 时 ， 文 件 下 载 到 
本 地 的 进度 值 ， 可 以 通过 该 元 素 动态 展示 在 页 面 中 。 展 示 进 度 的 方式 既 可 以 使 用 整数 ， 也 可 以 使 用 百 
分 比 〈 如 1096—10096) 。 

<progress> 元 素 的 属性 信息 如 表 6-3 所 示 。 


3&6-3 <progress> 元 素 的 属性 信息 


属 性 值 描述 
max number 定义 完成 的 值 
Value number 定义 进程 的 当前 值 
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在 <progress> 元 素 中 ， 设 置 的 value 值 必须 小 于 或 等 于 max 值 ， 并 且 两 者 都 必须 大 于 0. 


实例 6-9: 使 用 <progress> 标 记 元 素 实现 进度 条 效果 
源码 路 径 : 光盘 :\codes\6\9.html 


本 实例 的 功能 是 ， 分 别 在 页 面 中 创建 一 个 <progress> 元 素 和 一 个 “下 载 按钮 ”。 当 单 击 “ 下 载 按钮 
时 ， 通 过 元 素 <progress> 动 态 展 示 下 载 进度 状态 和 百分比 信息 。 当 下 载 结束 时 显示 “下 载 已 经 完成 ! ” 
的 提示 信息 。 实 例文 件 9.html 的 主要 代码 如 下 。 


<body> 
<p id="pTip"> 开 始 下 载 </p> 
<progress value="0" max="100" id="proDownFile"></progress> 
<input type="button" value=" 下 载 按钮 " 
class="inputbtn" onClick="Btn_Click();"> 
«script type="text/javascript"> 
var intValue = 0; 
var intTimer; 
var objPro  document.getElementByld(proDownFile"); 
var objTip = document.getElementByld('pTip"); 
/定时 事件 
function Interval handler() { 
intValue++; 
objPro.value = intValue; 
if (intValue >= objPro.max) ( 
Clearinterval(intTimer); 
objTip.innerHTML = "下 载 已 经 完成 ! "; 
}else{ 
objTip.innerHTML = "正在 下 载 中 " + intValue + "%"; 


) 
/下 载 按钮 单 击 事件 
function Btn. Click( 
intTimer = setInterval(Interval handler, 100); 
) 


</script> 

</body> 

在 上 述 代码 中 ， 为 了 使 <progress> 元 素 能 够 动态 展示 下 载 进 度 ， 需 要 通过 JavaScript 脚本 语言 编写 
一 个 定时 事件 。 在 这 个 事件 中 累加 变量 值 ， 并 将 该 值 设 置 为 <progress> 元 素 的 value 属性 值 。 当 这 个 属 
性 的 值 大 于 或 等 于 <progress> 元 素 的 max 属性 值 时 停止 累加 ， 并 显示 “下 载 已 经 完成 ! ”的 提示 信息 ; 
否则 将 动态 显示 正在 累加 的 百分比 数 ， 具 体 设置 是 通过 JavaScript 脚本 代码 实现 的 。 

执行 后 的 效果 如 图 6-13 所 示 ， 当 单 击 “ 下 载 按钮 ”后 弹出 一 个 进度 条 效果 ， 如 图 6-14 所 示 。 


开始 下 载 
poc FRSA 


643 ”初始 效果 
进度 条 完成 后 的 效果 如 图 6-15 所 示 。 


E Android D RISTER HERE 


正在 下 载 中 18% 
m TËRA 


下 载 已 经 完成 ? 
E TERA 


图 6-14 下载 进 度 条 图 6-15 下载 完成 后 的 效果 
6.8 使 用 <meter> 标 记 元 素 


Ga 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 6 章 \ 使 用 <meter> 标 记 元 素 .avi 
TE HTML 5 中 ， 可 以 使 用 <meter> 标 记 元 素 实现 百分比 效果 。<meter> 是 HTML 5 中 新 增 的 标记 ， 
用 于 表示 在 一 定数 量 范围 中 的 值 ， 例 如 投票 中 各 个 候选 人 各 占 比例 情况 等 。<meter> 元 素 仅 帮助 浏览 器 
识别 HTML 中 的 数量 ， 而 不 对 该 数量 做 任何 的 格式 修饰 。 在 <meter> 元 素 中 有 6 个 属性 ， 通 过 这 些 属 性 
会 根据 浏览 器 的 特征 以 最 好 的 方式 展示 相应 数量 。 
<meter> 标 记 元 素 的 属性 信息 如 表 6-4 所 示 。 
表 6-4 <meter> 标 记 元 素 的 属性 信息 


属 性 值 描述 

high number 定义 度量 的 值 位 于 哪个 点 ， 被 界定 为 高 的 值 

low number 定义 度量 的 值 位 于 哪个 点 ， 被 界定 为 低 的 值 

max number 定义 最 大 值 。 默 认 值 是 1 

min number 定义 最 小 值 。 默 认 值 是 0 
定义 什么 样 的 度量 值 是 最 佳 的 值 

optimum number 如 果 该 值 大 于 high 属性 的 值 ， 则 意味 着 值 越 大 越 好 ， 如 果 该 值 小 于 low 属性 的 值 ， 
则 意味 着 值 越 小 越 好 

value number 定义 度量 的 值 


low. high 和 optimum 这 3 个 属性 值 的 功能 是 ， 将 <meter> 元 素 展示 的 测量 范围 划分 为 low, high 
和 medium 3 个 部 分 ， 以 此 来 判断 该 测量 的 哪个 部 分 是 最 优 的 。 请 读者 考虑 下 面 的 meter 元 素 。 

«meter value-"0.3" optimum-"1" high="0.9" low="0.1" max="1" min="0"></meter> 

<span>30%</span> 

在 上 述 代码 中 ， 最 低 值 可 能 为 0， 用 min 表示 。 但 是 实际 最 低 为 0.1， 用 low 表示 。 最 高 值 可 能 为 
1， 但 实际 最 高 为 0.9。 

low. high 将 测量 范围 0 一 1 划分 为 0 一 0.1 (low) 、0.1 一 0.9 (medium) 、0.9 一 1 (high) 3 个 范围 ， 
optimum 指明 最 优 位 置 在 1 处 ， 此 时 该 值 比 high 值 大 ， 那 么 就 表示 value 值 越 大 越 好 ;类似 地 ， 如 果 
optimum 值 比 low 小 ， 则 表示 value 值 越 小 越 好 ， 如 果 optimum 值 落 在 low 值 与 high 值 之 间 ， 则 表示 
value 不 高 不 低 最 好 。 

例如 下 面 的 代码 演示 了 <meter> 元 素 的 基本 用 法 。 


@ 


«IDOCTYPE HTML» 

<html> 

<body> 

<meter min="0" max="10">2</meter><br /> 
<meter>2 out of 10</meter><br /> 
<meter>20%</meter> 

</body> 

</html> 


上 述 代码 的 执行 效果 如 图 6-16 所 示 。 
在 <meter> 元 素 中 ， 属 性 值 optimum 表示 的 是 最 佳 数量 值 ， 如 果 该 值 比 属性 high 值 大 ， 表 示 实 际 
值 越 高 越 好 ， 如 果 该 值 比 属性 low 值 小 ， 则 表示 实际 值 越 低 越 好 。 
”实例 6-10: 使 用 <meter> 标 记 元 素 显示 投票 结果 
源码 路 径 : 光盘 :\codes\6\10.html 


本 实例 的 功能 是 ， 显 示 两 个 候选 人 的 票数 比例 。 实 例文 件 10.html 的 主要 代码 如 下 。 


<body> 
<p> 共 有 200 人 参与 投票 ,明细 如 下 : </p> 
<p>AAA: 
<meter value="0.30" optimum="1" 
high="0.9" low="1" max="1" min="0"> 
</meter> 
<span> 30% </span></p> 
<p>BBB: 
«meter value="70" optimum-"100" 
high-"90" low-"10" max-"100" min="0"> 
</meter> 
<span> 70% </span></p> 
</body> 


在 上 述 代码 中 ， 候 选 人 BBB 所 占 的 比例 是 70%， 最 低 比例 可 能 为 0， 但 实际 最 低 为 0%; 最 高 比 
例 可 能 为 100%， 但 实际 最 高 为 90%。 其 实 <meter> 元 素 中 的 数量 也 可 以 使 用 浮 点 数 表 示 ， 如 上 述 代码 
中 所 示 。 为 了 展示 这 些 比例 值 ， 可 以 引入 其 他 元 素 ， 例 如 本 实例 中 使 用 了 <span> 元 素 展 示 这 些 数值 。 

执行 后 的 效果 如 图 6-17 所 示 。 


共有 200 人 参与 投票 ,明细 如 下 : 


2 AAA m 30% 
2 out of 10 BBB: e 70% 
20% 
图 6-16 执行 效果 图 6-17 执行 效果 


69 ”使 用 树 节点 标记 元 素 


Gu 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 使 用 树 节点 标记 元 素 .avi 
在 HTML 5 应 用 中 ， 新 增 了 许多 用 于 标志 节点 的 元 素 ， 例 如 <section> 和 <nav> 等 ， 通 过 这 些 元 素 可 
以 将 页 面 内 容 分 段 或 分 区 显示 。 本 节 将 详细 讲解 HIML 5 中 和 树 节点 有 关 的 标记 元 素 。 
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6.9.1 «section» 7t 


<section> 元 素 是 HTML 5 中 新 增 的 元 素 。 该 元 素 用 于 标记 文档 中 的 区 段 或 段落 ， 例 如 文章 中 的 章 
节 、 页 眉 、 页 脚 的 设置 。<section> 元 素 的 属性 信息 如 下 。 

回 cite: 值 为 URL， 如 果 section 来 源 于 Web， 设 置 <section> 的 URL. 

E] hidden: 值 为 true 或 false， 用 于 显示 或 隐藏 <section> 元 素 ， 默 认 值 是 false。 

回 draggable: 值 为 true 或 false， 用 于 设置 是 否 可 以 拖 动 <section> 元 素 ， 默 认 值 是 falses 


6.92 ”<nav> 元 素 


在 HTML 5 中 ,只 要 是 导航 性 质 的 链接 ,就 可 以 很 方便 地 将 其 放 入 <nav> 元 素 中 。 该 元 素 可 以 在 一 
个 文档 中 多 次 出 现 ， 作 为 页 面 或 部 分 区 域 的 导航 。 请 看 下 面 的 代码 。 


«nav draggable="true"> 

«a href= "index.html"> 首 页 < / a> 
«a hrefz"book.html"» A «/a» 

«a href="bbs.html"> 论 坛 </a> 
</nav> 


通过 上 述 代码 创建 了 一 个 可 以 拖 动 的 导航 区 域 ， 在 上 述 <nav> 元 素 中 包含 了 3 个 用 于 导航 的 超 链接 ， 
分 别 是 “首页 ”、“ 图 书 ” 和 “论坛 ”。 该 导航 可 用 于 全 局 导航 ， 也 可 放 在 某 个 段落 ， 作 为 区 域 导航 。 

区 SM 实例 6-11: 在 网 页 中 实现 一 个 树 节点 效果 00 

源码 路 径 : 光盘 :codes\GlIhtmL O 0000000000000 000 aaa 

本 实例 的 功能 是 ， 使 用 <nav> 元 素 实现 节点 效果 。<nav> 元 素 是 一 个 可 以 用 来 作为 页 面 导 航 的 链接 
组 ， 其 中 的 导航 元 素 链接 到 其 他 页 面 或 当前 页 面 的 其 他 部 分 。 并 不 是 所 有 的 链接 组 都 要 被 放 进 <nav> 
元 素 。 例 如 ， 在 页 脚 中 通常 会 有 一 组 链接 ， 包 括 服务 条 款 、 首 页 、 版 权 声明 等 ， 这 时 使 用 <footer> 元 素 
是 最 恰当 的 ， 而 不 需要 <nav> 元 素 。 实 例文 件 11.html 的 具体 代码 如 下 。 


<body> 

<h1>The Wiki Center Of Exampland</h1> 
<nav> 

«ul» 

<li><a hrefz"/"»Home«/a» «/li» 

<li><a hrefz"/events"» Current Events</a></li> 
.more... 

«Iul» 

</nav> 

<article> 

<header> 

<h1>Demos in Exampland</h1> 
<p>Written by A. N. Other.</p> 
</header> 

<nav> 


e. 
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<ul> 
<li><a href="#public">Public demonstrations</a></li> 


<li><a href="#destroy">Demolitions</a></li> 
...Imore... 

<lul> 

</nav> 

<div> 

<section id="public"> 

<h1>Public demonstrations</h1> 
«p»...more...«/p» 

</section> 

«section id="destroy"> 
<h1>Demolitions</h1> 

<p>...more...</p> 

</section> 

.More... 

</div> 

<footer> 

<p><a href="?edit">Edit</a> | «a href="?delete">Delete</a> | «a href="? 
Rename">Rename</a></p> 

</footer> 

</article> 

<footer> 

<p><small>@ copyright 1998 Exampland Emperor</small></p> 
</footer> 

</body> 


通过 上 述 代码 可 以 看 到 ,<nav> 元 素 不 仅 可 以 用 来 作为 页 面 全 局 导航 ,也 可 以 放 在 <article> 标 签 内 ， 
作为 单 篇 文章 内 容 的 相关 导航 链接 到 当前 页 面 的 其 他 位 置 。 执 行 效果 如 图 6-18 所 示 。 


The Wiki Center Of Exampland 


e bone — 
* Current Events 
more 


Demos in Exampland 


Written by A. N Other. 


Public demonstrations 
.e Gre... 

Demolitions 

n. more.. n 

Edit | Delete | Rename 


© copyright 1998 Exanpland Emperor 
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6.9.3 ”<hgroup> 元 素 


<hgroup> 元 素 是 HTML 5 中 新 增 的 元 素 ， 用 于 对 页 面 的 标题 进行 分 组 ， 从 而 形成 一 个 组 群 。 为 了 
更 好 地 说 明 各 组 群 的 功能 ， 该 元 素 常常 与 <figcaption> 元 素 结合 使 用 ， 通 过 <figcaption> 元 素 说 明 各 组 群 
的 功能 。 请 看 下 面 的 代码 : 

<hgroup draggable="true"> 

<figcaption> 标 题 一 </figcaption> 

<hl> 标 题 hl</hl> 

<h2> 标 题 h2</h2> 

</hgroup> 


在 上 述 代码 中 ， 通 过 元 素 <hgroup> 创 建 了 一 个 标题 组 ， 命 名 为 “标题 一 ”。 该 标题 中 包含 了 两 个 
子 标题 ， 分 别 为 “标题 hl ”与 “标题 h2”。 


6.10 使 用 分 组 标记 元 素 


E22 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 使 用 分 组 标记 元 素 .avi 

在 传统 的 HTML 标记 语言 中 ， 可 以 通过 <ul>、<ol>、<dl> 元 素 实现 分 组 效果 。 在 全 新 的 HTML 5 
中 ， 对 原 有 的 分 组 内 容 元 素 <ul>、<ol>、<dl> 进 行 了 整体 改良 ， 有 的 元 素 增加 了 许多 新 的 属性 ， 有 的 元 
素 则 废除 了 一 些 不 合理 的 原 有 特征 。 因 为 <d> 元 素 不 经 常 使 用 ， 所 以 本 节 将 详细 讲解 <ul> 元 素 和 <ol> 
元 素 的 基本 知识 。 


6.10.1 <ul> 元 素 


在 HTML 5 中 ，<ul> 元 素 用 于 定义 页 面 中 的 无 序列 表 ， 其 用 法 与 HTML 4 类 似 。 区 别 是 HTML 5 
不 再 支持 type 与 compact 这 两 个 属性 。 因 为 <ul> 元 素 通常 与 <li> 元 素 组 合 使 用 ， 所 以 HTML 5 也 不 支 
持 <li> 元 素 的 type 属性 ， 而 是 改 用 Css 样式 来 定义 列表 的 类 型 。 例 如 如 下 HTML 页 面 中 的 代码 。 


«ul» 

«li» AA(/li» 
<li>BB 
<ul> 
<li>CC</li> 
<li>DD</li> 
«Jul» 

«li» 

«li» CC«/li»- 
«Iul» 


在 上 述 代 码 中 ， 通 过 <ul> 元 素 创建 了 一 个 带 柑 套 的 列表 AA， 其 中 又 分 为 BB 和 CC 两 个 列表 项 。 
在 BB 列表 项 中 ， 通 过 <ul> 元 素 新 增加 了 一 个 子 列表 ， 用 于 展示 上 级 BB 列表 项 的 子 项 信息 ， 该 例 中 的 
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子 项 信息 包括 CC 和 DD。 
6.10.2 ”<ol> 元 素 


在 HTML 5 中 ，<ol> 元 素 用 于 在 页 面 中 有 序 地 创建 列表 。 与 HTML 4 相 比 ， 在 HTML 5 中 新 增加 
了 如 下 两 个 属性 。 

E] start: 用 于 自 定义 列表 项 开始 的 编号 。 

回 reversed: 用 于 设置 列表 是 否 进行 反 向 排序 。 


区 实例 6-12: 将 网 页 中 的 内 容 分 组 列表 显示 
源码 路 径 : 光盘 :\codes\6\12.html 


在 本 实例 中 ， 通 过 <ol> 元 素 创建 一 个 “MTYV 排行 榜 ” 列 表 ， 并 分 别 添 加 3 个 选项 CAA, BB, CC) 
作为 列表 的 内 容 。 另 外 ， 添 加 一 个 文本 框 “ 设 置 开 始 值 ”与 一 个 “确定 ”按钮 。 在 文本 框 中 输入 一 个 
值 并 单 击 “ 确 定 ” 按 钮 后 ， 将 以 文本 框 中 的 值 为 列表 项 开始 的 编号 显示 MTV 排行 。 

实例 文件 12.html 的 具体 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8" /> 
<title> 使 用 列表 </title> 
<link href="Css/css3.css" rel="stylesheet" type="text/css"> 
«script type-"text/javascript" async="true"> 
function Btn Click()[ 
var strNum-document.getElementByld("txtOrderNum").value; 
var strDiv-document.getElementByld("olL ist"); 
strDiv.setAttribute("start",strNum); 
} 
</script> 
</head> 
<body> 
<h5>MTV 排行 榜 </h5> 
«ol id="olList"> 
<li>AA</li> 
<li>BB</li> 
<li>CC</li> 
<lol> 
<h5> 设 置 开始 值 </h5> 
<input type="text" id="txtOrderNum" 
class="inputtxt" style="width:60px" /> 
«input type="button" value=" 确 定 " 
class-"inputbtn" onClick="Btn_Click();"> 
</body> 
</html> 


在 上 述 JavaScript 代码 中 ， 先 定义 一 个 函数 Btn_Click0， 用 于 在 单 击 “ 确 定 ”按钮 时 调用 。 在 该 函 
数 中 先 获 取 输 入 文本 的 值 与 <ol> 列 表 元 素 , 并 分 别 保存 至 变量 stNum 5 strDiv 中 。 然 后 通过 setAttribute0 
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方法 将 列表 元 素 的 start 属性 设置 为 变量 strNum 的 值 ， 从 而 改变 列表 项 元 素 编号 的 开始 值 。 
本 实例 执行 后 的 效果 如 图 6-19 所 示 ， 如 果 在 文本 框 中 输入 数字 7， 单 击 “ 确 定 ”按钮 后 将 以 7 开 
始 进行 排序 ， 如 图 6-20 所 示 。 


了 TY 排行 榜 了 ETY 排 行 榜 
1. AA 7T. M 
2. BB 8. BB 
3. CC 9. CC 
设置 开始 值 设置 开始 值 
[ mel E—31 
图 6-19 执行 效果 图 6-20 ”排序 效果 


6.11 使 用 文本 层次 语义 标记 


GA 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 使 用 文本 层次 语义 标记 .avi 

在 HTML 页 面 中 ， 为 了 使 文本 内 容 更 加 形象 、 生 动 ， 需 要 增加 一 些 特殊 功能 的 元 素 ， 用 于 突出 文 
本 间 的 层次 关系 或 标 为 重点 ， 我 们 将 这 样 的 元 素 称 为 文本 层次 语义 标记 。 在 HTML 5 中 ， 通 过 元 素 
<time>、<mark> 和 <cite> 可 以 设置 文本 层次 。 


6.11.1 ”<time> 元 素 


<time> 元 素 是 HTML 5 新 增加 的 一 个 标记 ,用 于 定义 时 间或 日 期 。 该 元 素 可 以 代表 24 小 时 中 的 某 
一 时 刻 ， 当 表示 时 刻 时 允许 有 时 间 差 。 在 设置 时 间或 日 期 时 ， 只 需 将 该 元 素 的 属性 datetime 设 为 相应 


的 时 间或 日 期 即 可 。 
<time> 元 素 的 属性 如 表 6-5 所 示 。 
表 6-5 <time> 元 素 的 属性 
m 性 值 描述 
datetime | datetime 规定 日 期 /时 间 。 否 则 ， 由 元 素 的 内 容 给 定 日 期 /时 间 
ubdate ubdate 指示 <time> 元 素 (或 <article> 元 素 ) 中 的 日 期 /时 间 是 文档 的 发 布 日 期 


<time> 元 素 中 的 可 选 属性 pubdate 表示 时 间 是 否 为 发 布 日 期 ， 它 是 一 个 布尔 值 ， 该 属性 不 仅 可 以 用 
于 <time> 元 素 ， 还 可 用 于 <article> 元 素 。 


6.11.2. «mark» zt E 
<mark> 元 素 是 HTML 5 中 新 增 的 元 素 ， 主 要 功能 是 在 文本 中 高 亮 显示 某 个 或 某 几 个 字符 ， 目 的 是 


引起 用 户 的 特别 注意 。 其 使 用 方法 与 <em> 和 <strong> 有 相似 之 处 ， 但 相 比 而 言 ，HTML 5 中 新 增 的 
<mark> 元 素 在 突出 显示 时 ， 更 加 随意 与 灵活 。 
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6.11.3 ”<cite> 元 素 


在 HTML 5 中 , 使 用 <cite> 元 素 可 以 创建 一 个 引用 标记 , 用 于 文档 中 参考 文献 的 引用 说 明 ， 如 书 名 
或 文章 名 称 。 如 果 在 文档 中 使 用 了 <cite> 元 素 ， 被 标记 的 文档 内 容 将 以 斜体 的 样式 展示 在 页 面 中 ， 以 区 
别 于 段落 中 的 其 他 字符 。 


re 实例 6-13: 在 网 页 中 突出 显示 某 些 文字 
b 源码 路 径 : Jf codes 613.html 


在 本 实例 中 ， 首 先 使 用 <h5> 元 素 创建 一 个 标题 “理想 是 什么 ? 是 面包 ”， 然 后 通过 <p> 元 素 对 标题 
进行 阐述 。 为 了 引起 用 户 对 重要 内 容 的 注意 ， 使 用 <mark> 元 素 高 亮 处 理 字符 “面包 ”、“ 大 山 ” 和 “天 
知道 ”。 实 例文 件 13.html 的 具体 代码 如 下 。 

<body> 

<h5> 理 想 是 什么 ? 是 <mark> 面 包 </mark></h5> 

<p class="p3_5"> 

喜欢 大 海 吗 

还 是 喜欢 <mark> 大 山 </mark> 

<mark> 天 知道 </mark> 的 答案 ! 
«Ip» 

</body> 

在 上 述 代码 中 ， 使 用 <mark> 元 素 将 文字 中 的 “面包 ”、“ 大 山 ” 和 “天 知道 ”3 个 字符 进行 了 高 
亮 显 示 处 理 。<mark> 元 素 的 这 种 高 亮 显示 的 特征 ， 除 用 于 文档 中 突出 显示 外 ， 还 常用 于 查看 搜索 结果 
页 面 中 关键 字 的 高 亮 显 示 ， 其 目的 主要 是 引起 用 户 的 注意 。 执 行 效果 如 图 6-21 所 示 。 

mSECA' REA 
喜欢 大 海 吗 还 是 喜欢 大 山 天 知道 的 答案 ? 


图 6-21 执行 效果 
注意 : <mark> 元 素 在 使 用 效果 上 与 <em> 或 <strong> 元 素 有 相似 之 处 ， 但 三 者 的 出 发 点 是 不 一 样 的 。 
<strong> 元 素 是 作者 对 文档 中 某 段 文字 的 重要 性 进行 强调 ; <em> 元 素 是 为 了 突出 文章 的 重点 而 
进行 设置 ;<mark> 元 素 是 数据 展示 时 ， 以 高 亮 的 形式 显示 某 些 字符 。 


6.12 使 用 <img> 标 记 元 素 


Gu 知识 点 讲解 : 光盘 \ 视 频 讲解 第 6 章 \ 使 用 <img> 标 记 元 素 .avi 

在 HIML 5 页 面 中 , 除了 显示 文档 或 字符 外 ,还 经 常 需要 放 入 一 些 其 他 元 素 , 例如 图 片 <img>、 页 
面 <ifame> 和 多 媒体 <object> 等 。 这 些 元 素 对 于 整个 DOM 文档 来 说 ， 属 于 嵌入 内 容 。 其 中 <img> 元 素 
的 功能 是 在 页 面 中 导入 一 幅 图 像 ， 它 是 页 面 开发 中 使 用 较为 频繁 的 一 个 元 素 。 在 HTML 5 中 ， 该 元 素 


DU Android SD RUSTER ER 


的 border. align. hspace. vspace 属性 不 再 被 支持 ， 这 些 功能 需要 通过 CSS 样式 来 实现 。 在 HTML 4.01 
中 ， 也 不 赞成 使 用 这 些 布局 属性 。 
<img> 元 素 的 主要 属性 如 表 6-6 所 示 。 


表 6-6 ”<img> 元 素 的 属性 


描述 
| 规定 图 像 的 替代 文本 i 把 图 像 设置 为 服务 器 端 图 像 映射 
| 规定 图 像 的 URL E 


本 实例 的 功能 是 , 使 用 <img> 元 素 在 网 页 中 显示 一 幅 图 片 ， 本 实例 的 图 片 素材 是 eg_tulip.jpg。 实 例 
文件 14.html 的 具体 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<body> 


<img src="/i/eg_tulip.jpg” alt=" 上 海鲜 花 港 - 郁金香 " width-"400" height-"266" /> 


</body> 
</html> 


执行 效果 如 图 6-22 所 示 。 


ID RED EEV PRD 
EER | emnes ims 


图 6-22 执行 效果 


6.13 ”使 用 <iframe> 标 记 元 素 


Gai 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 使 用 <iframe> 标 记 元 素 .avi 
在 HTML 5 中 ，<iframe> 元 素 的 功能 是 在 页 面 中 创建 包含 男 一 文档 的 框架 。 出 于 对 页 面 安全 性 的 
考虑 ，HTML 5 不 再 支持 <frame> 框 架 元 素 ， 包 括 <frameset> 框 架 集 元 素 ， 但 仍然 支持 <iframe> 元 素 ， 只 
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是 该 元 素 的 一 些 原 有 属性 不 再 被 支持 ， 而 仅 支 持 sre 属性。 

众所周知 ， 当 使 用 <iframe> 元 素 包 含 另 一 个 页 面 时 ， 这 一 操作 的 安全 性 会 让 开发 者 担忧 。 为 了 避免 
这 个 问题 ， 在 HTML 5 中 新 增加 了 元 素 的 一 个 属性 : sandbox， 通 过 该 属性 的 设置 ， 可 以 避免 私自 访问 
父 页 面 、 执 行 异 样 脚本 、 通 过 脚本 嵌入 表单 或 控制 表单 。 属 性 sandbox 有 如 下 4 个 属性 值 。 

El allow-forms: 人 允许 脚本 嵌入 自己 的 表单 或 操纵 表单 。 

El allow-same-origin: 允许 将 嵌入 内 容 视 为 同一 个 数据 源 。 

回 allow-scripts: 允许 执行 脚本 。 

E] allow-top-navigation: 人 允许 最 外 层 浏 览 器 的 上 下 文 导航 功能 。 

在 具体 设置 时 , 建议 读者 根据 实际 需求 选择 允许 的 操作 ,从 而 有 效 避 免 <iframe> 元 素 嵌 入 的 文档 有 
安全 性 问题 。 


K 实例 6-15: 在 网 页 中 显示 一 个 文本 框架 
源码 路 径 : 光盘 :\codes\6\15.html 


本 实例 的 功能 是 ， 使 用 <iframe> 元 素 在 网 页 中 显示 一 个 文本 框架 。 实 例文 件 15.html 的 主要 代码 
如 下 。 


<body> 
«iframe src="http://www.w3schools.com"></iframe> 
</body> 


执行 效果 如 图 6-23 所 示 。 
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IERI] wv. googLe- malytics. con" 
图 6-23 ”执行 效果 


6.14 ”使 用 <objecf> 标 记 元 素 


CR 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 6 章 \ 使 用 <object> 标 记 元 素 .avi 

在 HTML 5 网 页 中 ， 可 以 使 用 <object> 标 记 元 素 在 网 页 中 显示 一 个 Hash，<object> 元 素 的 功能 是 定 
义 一 个 嵌入 的 对 象 。 可 使 用 此 元 素 向 XHTML 页 面 添加 多 媒体 ， 此 元 素 运行 规定 插入 HTML 文档 中 的 
对 象 的 数据 和 参数 ， 以 及 可 用 来 显示 和 操作 数据 的 代码 。 

<object> 元 素 可 以 位 于 <head> 元 素 或 <body> 元 素 内 部 。<object> 与 </objec 人 > 之 间 的 文本 是 蔡 换文 本， 
针对 不 支持 此 标签 的 浏览 器 。<param> 标 签 可 定义 用 于 对 象 的 run-time 设置 。 

<object> 元 素 的 属性 信息 如 表 6-7 所 示 。 
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表 6-7 ”<object> 元 素 的 属性 信息 


属 性 H £ 
align HTML 5 中 不 支持 
archive HTML 5 中 不 支持 
border HTML 5 中 不 支持 
classid HIML 5 中 不 支持 
codebase HTML 5 中 不 支持 
codetype HTML 5 中 不 支持 
data 规定 对 象 使 用 的 资源 的 URL 
declare HTML 5 中 不 支持 
form 规定 对 象 所 属 的 一 个 或 多 个 表单 
height 规定 对 象 的 高 度 
hspace HTML 5 中 不 支持 
name 为 对 象 定义 名 称 
standb HIML 5 中 不 支持 
ype 定义 data 属性 中 规定 的 数据 的 MIME 类 型 
usemap 规定 与 对 象 一 同 使 用 的 客户 端 图 像 映射 的 名 称 
vspace [as 0 | HIML 5 中 不 支持 
width 规定 对 象 的 宽度 
实例 6-16 是 ， 在 HTML 5 网 页 中 显示 一 个 Flash， 本 实例 的 素材 Flash 文件 是 123.swf。 


实例 文件 16.html 的 主要 代码 如 下 。 


<body> 
«object data= "123.Swf" type-"all" 
widthz"200px" height="200px"> 


<lobject> 
</body> 
上 述 代码 按照 HTML 5 的 支持 特征 ， 设 置 了 <objec> 元 E — a e 
素 的 关键 属性 data 值 。 执 行 后 的 效果 如 图 6-24 所 示 。 如 果 rs 


按照 设置 的 多 媒体 路 径 找到 了 该 对 象 , 在 支持 HIML 5 属性 - J 
的 浏览 器 中 可 以 实现 播放 功能 。 在 HTML 5 中 , 新 增 了 专门 
用 于 播放 多 媒体 文件 的 标签 元 素 一 一 <video> 和 <audio> 元 素 。 

前 者 用 于 播放 视频 或 影视 , 后 者 用 于 播放 音频 文件 ， 这 两 个 
元 素 的 实战 用 法 将 在 本 书后 面 的 章节 中 进行 详细 介绍 。 

<video> 与 <audio> 元 素 将 逐步 取代 <object> 元 素 ， 从 而 真正 
展示 HTML 5 在 处 理 视频 或 音频 方面 的 强大 优势 。 图 6-24 执行 效果 
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第 7 章 ”使 用 表单 元 素 


表单 在 网 页 中 的 作用 非常 重要 ， 因 为 表单 是 实现 动态 网 页 的 基础 。 在 HTML 5 中 ， 拥 有 多 个 新 的 
表单 输入 类 型 ， 通 过 这 些 新 特性 可 以 实现 更 好 的 输入 控制 和 验证 。 本 章 将 通过 几 个 具体 实例 来 演示 表 
单元 素 的 使 用 方法 。 


7.1 表单 元 素 的 类 型 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 7 章 \ 表 单元 素 的 类 型 .avi 
在 全 新 的 HTML 5 中 ， 拥 有 多 个 新 的 表单 输入 类 型 。 这 些 新 特性 为 用 户 提供 了 更 好 的 输入 控制 和 
验证 。 本 节 将 介绍 HTML 5 中 表单 元 素 的 类 型 。 


7.1.1 email 类 型 


在 HIML 5 中 ，email 类 型 用 于 应 该 包含 Email 地 址 的 输入 域 。 如 果 将 <input> 元 素 中 的 type 类 型 
设置 为 email， 将 在 页 面 中 创建 一 个 专门 用 于 输入 邮件 地 址 的 文本 框 。 该 文本 框 与 其 他 文本 框 在 页 面 显 
示 时 没有 区 别 ， 专 门 用 于 接收 Email 地 址 信息 。 当 提交 表单 时 ， 会 自动 检测 文本 框 中 的 内 容 是 否 符合 
Email 邮件 地 址 格式 ， 如 果 不 符合 则 提示 相应 错误 信息 。 

在 提交 表单 之 前 不 会 检测 email 类 型 文本 框 的 内 容 是 否 为 空 , 而 只 有 在 不 为 空 的 情况 下 才 检测 其 内 
容 是 否 符合 标准 的 Email 格式 。 如 果 该 元 素 的 multiple NEM un 则 允许 用 户 输入 一 串 用 逗号 分 
隔 的 Email 地 址 。 在 提交 表单 时 ， 会 自动 验证 Email 域 中 的 值 是 否 


区 实例 7-1: 验证 邮件 地 址 是 否 合法 
e 源码 路 径 : Jti codes 7 1.html 


ee 加 入 了 一 个 email 类 型 的 <input> 元 素 ， 功 能 是 输入 邮件 地 址 。 并 且 还 新 
一 个 表单 提交 按钮 ， 当 单 击 “ 提 交 ” 按 钮 时 会 自动 检测 email 类 型 的 文本 框 中 输入 的 字符 是 否 符合 
iR 如 果 不 符合 则 显示 对 应 的 错误 提示 信息 。 
实例 文件 1.html 的 主要 代码 如 下 。 


<body> 
«form id="frmTmp"> 
<fieldset> 
<legend> 请 输入 合法 的 邮件 地 址 : «legend» 
«input name="txtEmail" type-"email" 
class-"inputtxt" multiple-"true" 
«input name-"frmSubmit" type="submit" 
class-"inputbtn" value=" 提 交 "> 


ess 


</fieldset> 
</form> 


</body> 


在 上 述 代码 中 , 将 <input> 元 素 的 multiple 请 织 入 合法 的 邮件 地 址 : 
属性 值 设 置 为 true, “E Chrome 10 浏览 器 中 ij »- 
单 击 “ 提 交 ” 按 钮 时 ， 显 示 的 提示 信息 为 “请 E IRABIS ADATE REA 
输入 用 逗号 分 隔 的 电子 邮件 地 址 的 列表 ”; 一 
而 如 果 不 设置 该 属性 值 ， 则 提示 信息 为 “请 
输入 电子 邮件 地 址 ”执行 效果 如 图 7-1 所 示 。 


7.42 un 类 型 图 7-1 执行 效果 


在 全 新 的 HTML 5 中 ，url 类 型 用 于 包含 URL 地 址 的 输入 域 。 在 提交 表单 时 ， 会 自动 验证 url 域 
中 的 值 。 在 输入 元 素 <input> 中 ，url 类 型 是 一 种 新 增 的 类 型 ， 该 类 型 表示 <input> 元 素 是 一 个 专门 用 于 输 
入 Web 站 点 地 址 的 文本 框 。Web 地 址 的 格式 与 普通 文本 有 些 区 别 , 例如 文本 中 有 反 斜 杠 “/” 和 点 “.”。 
为 了 确保 url 类 型 的 文本 框 能 够 正确 提交 符合 格式 的 内 容 , 表单 在 提交 数据 前 会 自动 验证 其 内 容 格式 的 
有 效 性 。 如 果 不 符合 对 应 的 格式 ， 则 会 出 现 相应 的 错误 提示 信息 。 并 且 与 email 类 型 一 样 ，url 的 有 效 
性 检测 并 不 会 判断 文本 框 的 内 容 是 否 为 空 ， 而 是 针对 非 空 的 内 容 进 行 格式 检测 。 


区 实例 7-2: 验证 输入 的 是 否 是 一 个 URL 地 址 
源码 路 径 : 光盘 :\codes\7\2.html 


在 本 实例 中 ， 首 先 创建 一 个 ur 类 型 的 <input> 元 素 ， 然 后 新 建 一 个 表单 提交 按钮 。 当 单 击 “ 提 交 ” 
按钮 时 ,会 自动 检测 文本 框 中 的 元 素 是 否 符合 Web 地 址 格式 ， 如 果 不 是 合法 的 URL， 则 显示 错误 提示 
信息 。 实 例文 件 2.html 的 主要 代码 如 下 。 


<body> 
«form id="frmTmp"> 
<fieldset> 
<legend> 请 输入 网 址 : </legend> 
«input name-"txtUrl" type-"url" 
class-"inputtxt" /> 
«input name-"frmSubmit" type-"submit" 
class-"inputbtn" value" 3z" /> 
</fieldset> 
</form> 


</body> 


在 上 述 代码 中 ， 将 文本 框 的 type 属性 设置 为 url， 浏 览 器 将 自动 检验 文本 框 中 的 内 容 是 否 符合 url 
的 格式 ， 如 果 不 符 合 则 弹出 提示 信息 。 在 此 需要 说 明 的 是 ， 目 前 对 <input> 元 素 新 增 类 型 提供 支持 的 只 
有 Chrome 10 5j Opera 11 浏览 器 ， 其 他 浏览 器 暂时 还 不 支持 ， 而 这 两 个 浏览 器 对 url 类 型 的 <input> 元 素 
在 页 面 展 示 时 ， 效 果 并 不 一 样 。Chrome 10 浏览 器 要 求 必须 输入 完整 的 URL. 地 址 路 径 〈 包 括 http:/) ， 
并 不 介意 前 面 有 空格 ;而 Opera 11 浏览 器 不 必 输 入 完整 的 URL 地 址 路 径 ， 提 交 时 会 自动 在 前 面 添加 ， 
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但 是 开始 处 不 能 有 空格 ， 如 果 文 本 框 中 的 开始 处 有 空格 ， 将 提示 格式 出 错 信息 。 执 行 效果 如 图 7-2 所 示 。 


区 — 38 


B 请 输入 网 址 。 


图 7-2 执行 效果 
7.1.8 number 类 型 


在 全 新 的 HTML 5 中 ，number 类 型 用 于 设置 包含 数值 的 输入 域 。 通 过 number 类 型 能 够 设 定 对 所 
接受 的 数字 的 限定 。 可 以 使 用 表 7-1 所 示 的 属性 来 规定 对 数字 类 型 的 限定 。 
表 7-1 number 类 型 支持 的 属性 


规定 允许 的 最 大 值 


规定 允许 的 最 小 值 
规定 合法 的 数字 间隔 ， 如 果 step="3"， 则 合法 的 数 是 -3、0、3、6 等 


在 HTML 4 以 前 的 版 本 中 ， 如 果 想 要 在 表单 中 输入 一 个 指定 范围 的 整数 ， 需 要 在 表单 提交 前 使 用 
代码 进行 数据 检测 ， 以 确定 输入 框 中 是 否 是 一 个 符合 要 求 的 整数 。 而 在 全 新 的 HTML 5 中 ， 只 要 创建 
一 个 number 类 型 的 <input> 元 素 ， 便 可 以 实现 以 上 操作 。 该 类 型 的 元 素 在 HTML 5 中 还 将 显示 一 个 微 
调控 件 ， 如 果 指 定 了 最 大 与 最 小 范围 值 , 就 可 以 单 击 微调 控件 的 上 限 与 下 限 按钮 ， 以 指定 的 步 长 (step) 
增加 或 减少 输入 框 中 的 值 ， 极 大 地 方便 了 用 户 的 操作 。 

在 number 类 型 的 输入 框 中 , 不 能 输入 其 他 非 数字 型 的 字符 ， 并 且 当 输入 的 数字 大 于 设 定 的 最 大 值 
或 小 于 设置 的 最 小 值 时 ， 都 将 出 现 数字 输入 出 错 的 提示 信息 。 同 样 ， 该 类 型 不 进行 输入 内 容 是 否 为 空 
值 的 自动 检测 。 


区 实例 7-3: 验证 输入 的 数值 是 否 合法 
源码 路 径 : 光盘 :\codes\73.html 


在 本 实例 中 创建 了 3 个 表单 和 3 个 number 类 型 的 <input> 元 素 , 分 别 用 于 输入 日 期 中 年 、 月 、 日 的 
数字 。 同 时 ， 新 建 一 个 表单 的 “提交 ”按钮 。 单 击 该 按钮 时 会 检测 这 3 个 输入 框 中 的 数字 是 否 属于 各 
自 设置 的 整数 范围 ， 如 果 不 符合 则 显示 错误 提示 信息 。 

实例 文件 3.html 的 主要 代码 如 下 。 

<body> 

«form id="frmTmp"> 

<fieldset> 

<legend> 输 入 您 的 初恋 时 间 : «legend» 


LU Android D RUSTER HERE 


«input name-"txtYear" type-"number" 
class-"inputtxt" min-"1960" max-"1990" 
step-"1" value-"1990" /> 年 

<input name-"txtMonth" type-"number" 
class-"inputtxt" min="1" max-"12" 
step="1" value="4"/> 月 

«input name-"txtDay" type-"number" 
class-"inputtxt" min="1" max-"31" 
Step-"1" value="23"/> 日 

«input name-"frmSubmit" type-"submit" 
class-"inputbtn" value=" 提 交 " /> 

</fieldset> 
</form> 


</body> 


在 上 述 代 码 中 ， 定 义 了 3 个 number 类 型 的 <input> 元 素 输入 框 ， 分 别 用 于 设置 年 、 月 、 日 。 其 中 
step 属性 值 表示 步 长 值 ， 默 认 值 为 1， 表 示 当 PTR 
用 户 单 击 微调 控件 时 ， 向 上 增加 或 向 下 减少 a B 
的 值 。 所 有 这 些 属 性 值 都 是 可 选项 ， 如 果 不 BAI CIE 
需要 指定 数字 上 限 则 可 以 省 略 max 属性 。 - E 

运行 上 述 代 码 后 ， 如 果 不 能 向 上 调 数字 ， 
那么 微调 控件 向 上 按钮 变 灰 ， 表 示 不 可 用 。 
反之 ， 向 下 按钮 变 为 灰色 ， 表 示 不 可 用 。 执 
行 效果 如 图 7-3 所 示 。 


7.14 range 类 型 


图 7-3 执行 效果 


在 全 新 的 HTML 5 中 ，range 类 型 能 够 实现 滑动 条 效果 。 在 网 页 中 ，range 类 型 显示 为 滑动 条 的 样 
式 ， 并 且 可 以 设 定 所 接受 的 数字 的 限定 。 可 以 使 用 表 7-2 中 的 属性 来 设置 对 数字 类 型 的 限定 。 


表 7-2 range 类 型 支持 的 属性 


规定 允许 的 最 大 值 
规定 允许 的 最 小 值 
规定 合法 的 数字 间隔 ， 如 果 step="3"， 则 合法 的 数 是 -3、0、3、6 等 
规定 默认 值 


如 果 要 在 HTML 5 中 输入 整数 ， 除 了 使 用 前 面 介绍 过 的 number 类 型 外 ， 还 可 以 使 用 range 类 型 。 
这 两 种 数字 类 型 的 <input> 元 素 基 本 属性 一 样 ， 唯 一 的 不 同 在 于 页 面 中 的 展示 形式 。number 类 型 在 页 面 
中 以 输入 框 添加 了 微调 控 展示 数字 , 而 range 类 型 则 以 滑动 条 的 形式 展示 数字 , 通过 拖 动 滑 块 实现 数字 
的 改变 。 


iC 实例 7-4: 通过 滑动 条 设置 颜色 
- 源码 路 径 : 光盘 :\codes\74.html 
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于 设置 颜色 中 的 红色 (r) 、 绿 色 Cg) 、 蓝 色 (COO 。 另 外 ， 新 建 一 个 <p> 元 素 ， 用 于 展示 滑动 条 改变 
时 的 颜色 区 。 当 用 户 任意 拖 动 某 个 绑 定 颜色 的 滑 块 时 ， 对 应 的 颜色 区 背景 色 都 会 随 之 发 生变 化 。 同 时 ， 
颜色 区 下 面 显示 对 应 的 色彩 值 (rgb) 。 实 例文 件 4html 的 主要 代码 如 下 。 


<body> 
«form id="frmTmp"> 
<fieldset> 
<legend> 请 选择 颜色 值 : </legend> 
«span id-"spnColor" 
«input id-"txtR" type-"range" value-"0" 
min="0" max="255" onChange-"setSpnColor()" > 
«input id-"txtG" type-"range" value-"0" 
min="0" max-"255" onChange-"setSpnColor()"» 
«input id-"txtB" type-"range" value-"0" 
min="0" max="255" onChange-"setSpnColor()"» 
</span> 
<span id="spnPrev"></span> 
«P id="pColor">rgb(0,0,0)</P> 
</fieldset> 
</form> 
</body> 


在 上 述 代码 中 ， 分 别 使 用 range 类 型 定义 了 3 个 <input> 元 素 ， 这 些 元 素 都 以 滑动 条 的 形式 展示 在 
页 面 中 。 当 拖 动 滑 块 时 ， 将 触发 JavaScript 的 一 个 自 定义 函数 setSpnColor0， 此 函数 可 以 根据 获取 滑动 
条 的 值 动态 改变 颜色 块 的 背景 色 。 

脚本 文件 js4.js 的 代码 如 下 。 

/NavaScript Document 


function $$(id}{ 
return document.getElementByld(id); 


} 

/定义 变量 

var intR,intG,intB,strColor; 

/根据 获取 变化 的 值 ， 设 置 预览 方块 的 背景 色 函 数 

function setSpnColor()( 
intR-$S("txtR").value; 
intG-$$("txtG").value; 
intB-$$("txtB").value; 
strColor="rgb("+intR+","+intG+","+intB+")"; 
$$("pColor").innerHTML=strColor; 
$$("spnPrev").style.backgroundColor=strColor; 


} 
// 初 始 化 预览 方块 的 背景 色 
setSpnColor(); 


执行 后 的 初始 效果 如 图 7-4 所 示 ， 拖 动 3 个 滑 块 可 以 设置 不 同 的 颜色 ， 并 可 在 右 侧 区 域 预览 颜色 ， 
如 图 7-5 所 示 。 


移动 网 站 开发 详解 


请 选择 颜色 值 : 一 一 一 一 一 一 一 一 一 一 一 一 请 选择 颜色 值 : 
F———— de 
一 -一 一 一 和 一 一 
rgb(0,0,0) reb (0, 73, 136) 
图 7-4 初始 效果 7-5 通过 滑动 条 预览 颜色 


7.1.5 Date Pickers (数据 检 出 器 ) 


在 全 新 的 HTML 5 中 ， 使 用 Date Pickers (数据 检 出 器 〉 可 以 为 用 户 提供 日 期 和 时 间 输 入 框 。 这 样 
可 以 避免 用 打字 的 方式 输入 日 期 和 时 间 ， 能 够 大 大 提高 处 理 数据 的 效率 。 在 HTML 5 中 提供 了 多 个 可 
供 选 取 日 期 和 时 间 的 新 输入 类 型 ， 具 体 说 明 如 下 。 
date: 选取 日 、 月 、 年 。 
month: 选取 月 和 年 。 
week: 选取 周 和 年 。 
time: 选取 时 间 〔 小 时 和 分 钟 )。 
datetime: 选取 时 间 、 日 、 月 、 年 (UTC 时间)。 
datetime-local: 选取 时 间 、 日 、 月 、 年 (本 地 时 间 )。 

在 HTML 4 之 前 的 版 本 中 ， 没 有 专门 用 于 显示 日 期 的 文本 输入 框 ， 开 发 者 需要 专门 编写 大 量 的 
JavaScript 代码 或 导入 相应 的 插件 ， 整 个 实现 过 程 较为 复杂 。 在 HTML 5 中 ， 只 需要 将 <input> 元 素 的 类 
型 设置 为 date， 便 可 以 创建 一 个 日 期 文本 框 。 当 单 击 该 文本 框 时 会 弹出 一 个 日 历 选择 器 ， 选 择 日 期 并 
关闭 选择 器 ， 会 将 所 选择 的 日 期 显示 在 文本 框 中 。 


区 实例 7-5: 自动 弹出 日 期 和 时 间 文 本 框 供用 户 选择 
源码 路 径 : 光盘 :\codes\7\S.html 


在 本 实例 的 页 面 表单 中 ， 分 3 组 创建 6 个 不 同 展示 形式 的 日 期 类 型 文本 框 。 

ED 第 1 组 : 显示 日 期 与 时 间 类 型 ， 展 示 类 型 为 date 55 time 值 的 日 期 文本 框 。 

回 第 2 组 : 显示 月 份 与 星期 类 型 ， 展 示 类 型 为 month 与 week 值 的 日 期 文本 框 。 

回 第 3 组 : 显示 日 期 与 时 间 型 ， 展 示 类 型 为 datetime 与 datetime-local 值 的 日 期 文本 框 。 当 提交 
所 有 这 些 输入 框 中 的 数据 时 ， 都 将 对 输入 的 日 期 或 时 间 进行 有 效 性 检测 ， 如 果 不 符合 将 弹出 
提示 信息 。 

实例 文件 5.html 的 主要 代码 如 下 。 

<body> 

«form id="frmTmp"> 

<fieldset> 
<legend> 日 期 + 时 间 类 型 : </legend> 
«input name-"txtDate 1" type-"date" 
class="inputtxt"> 
<input name-"txtDate 2" type-"time" 
class-"inputtxt"- 
</fieldset> 


e. 
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<fieldset> 
<legend> 月 份 + 星期 类 型 : «legend» 
«input name-"txtDate 3" type-"month" 
class="inputtxt"> 
<input name="txtDate_4" type="week" 
class="inputtxt"> 
</fieldset> 
<fieldset> 
<legend> 日 期 + 时 间 型 : </legend> 
<input name-"txtDate 5" type-"datetime" 
class-"inputtxt"^ 
«input name-"txtDate 6" type-"datetime-local" 
class-"inputtxt"^ 
</fieldset> 
</form> 
</body> 


在 上 述 代码 中 ，datetime 类 型 是 专门 用 于 UTC 日 期 与 时 间 的 输入 文本 框 ， 而 datetime-local 类 型 则 
是 用 于 本 地 日 期 与 时 间 的 输入 文本 框 ， 默认 值 为 本 地 的 日 期 与 时 间 。 另 外 ， 在 week 类 型 的 输入 文本 框 
中 ， 如 果 值 为 2017-W10， 则 表示 在 2012 年 的 第 10 个 星期 ， 依 此 类 推 ， 该 星期 的 值 表示 当年 的 第 几 个 


星期 。 程 序 在 Opera 浏览 器 的 执行 效果 如 图 7-6 所 示 。 
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图 7-6 Opera 浏览 器 的 执行 效果 
如 果 在 Chrome 浏览 器 中 运行 上 述 程序 ， 则 不 能 弹出 日 期 选择 器 ， 如 图 7-7 所 示 。 


日 期 {时 间 类 型 ; 一 一 一 一 一 一 一 一 一 一 一 月 份 + 星期 类 型 ; 


l 日 期 | 时间 型 : — — —31 


7-7 Chrome 浏览 器 的 执行 效果 


7.1.6 search 类 型 


在 HTML 5 中 , 通过 search 类 型 可 以 实现 一 个 搜索 域 , 如 站 点 搜索 或 Google、 百度 搜索 。search 域 
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显示 为 常规 的 文本 域 。search 类 型 的 <input> 元 素 专 门 用 于 关键 字 的 查询 ， 该 类 型 的 文本 框 与 text 类 型 
的 文本 框 在 功能 上 没有 太 大 的 区 别 ， 都 是 用 于 接收 用 户 输 入 的 查询 关键 字 。 但 是 当 在 页 面 展示 时 却 有 
少许 的 区 别 。 在 Chrome 与 Safari 浏览 器 中 ， 当 开始 在 文本 框 中 填写 内 容 时 , 文本 框 的 右 侧 将 会 出 现 一 
个 “x” 按 钮 ， 单 击 该 按钮 会 清空 文本 框 中 的 内 容 。 


C 实例 7-6: 显示 文本 框 中 的 搜索 关键 字 
b 源码 路 径 : 光盘 :\codes\7\6.html 


在 本 实例 的 表单 中 ， 增 加 了 一 个 search 类 型 的 <input> 元 素 ， 功 能 是 用 于 输入 查询 关键 字 。 然 后 
为 此 表单 增加 一 个 “提交 ”按钮 ， 当 单 击 按钮 时 显示 输入 的 关键 字 内 容 。 实 例文 件 6.html 的 主要 代 
码 如 下 。 


<body> 
«form id="frmTmp" onSubmit="return ShowKeyWord();"» 
<fieldset> 
<legend> 请 输入 搜索 关键 字 : </legend> 
«input id="txtKeyWord" type-"search" 
class-"inputtxt"^ 
«input name-"frmSubmit" type-"submit" 
class-"inputbtn" value=" 提 交 "> 
</fieldset> 
<p id="pTip"></p> 
</form> 
</body> 


上 述 代码 中 , 在 表单 提交 时 为 了 获取 search 类 型 的 <input> 文 本 框 的 值 , 在 表单 的 onSubmit 事件 中 
调用 了 一 个 JavaScript 自 定义 函数 ShowKeyWord0。 在 自 定义 函数 ShowKeyWord0 中 ， 先 获取 查询 文 
本 框 的 值 ， 然 后 将 该 值 设 置 为 展示 元 素 <p> 的 内 容 ， 并 通过 return false 方法 终止 表单 提交 的 过 程 ， 最 后 
显示 该 函数 执行 结果 。 

上 述 代 码 调用 了 脚本 文件 js6js， 此 文件 的 主要 代码 如 下 。 

II JavaScript Document 


function $$(id)( 
return document.getElementByld(id); 


} 

/将 获取 的 内 容 显示 在 页 面 中 

function ShowKeyWord(){f 
var strTmp="<b> 亲 ， 您 输入 的 查询 关键 字 是 一 一 </b>"; 
strTmp=strTmp+$$('txtKeyWord').value; 
$$('pTip').innerHTML=strTmp; 
return false; 


} 

执行 效果 如 图 7-8 所 示 。 在 文本 框 中 输入 关键 字 ， 单 击 “ 提 交 ” 按 钮 后 将 在 下 方 显示 输入 的 关键 
字 ， 如 图 7-9 所 示 。 

WRH Chrome 与 Safari 浏 览 器 中 , 当 开 始 在 文本 框 中 填写 内 容 时 ,文本 框 的 右 侧 将 会 出 现 一 个 “xX” 
按钮 ， 如 图 7-10 所 示 。 当 单 击 “X ”按钮 时 会 清空 文本 框 中 的 内 容 ， 如 图 7-11 所 示 。 


e. 


s75 smapre 000 


ME So 
xt uc 查看 WD PO SEQ IAD $ 
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€ 3 Q9:--c)](si- s Je. eel 
请 答 入 搜索 关键 于: 一 一 一 一 一 一 一 一 一 一 
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MRAREXRF: 
HNL S E sud 
J * , 您 输 入 的 查询 关 键 宇 是 一 一 TIL 5 
图 7-8 执行 效果 


7-9 ”显示 输入 的 关键 字 


请 输入 搜索 关键 字 ; 
[m^ 


F. 您 输入 的 查询 关键 宇 是 一 一 :sss h 


图 7-10 ER "x" 图 7-11 清空 文字 


72 表单 元 素 中 的 属性 


GA 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 7 章 \ 表 单元 素 中 的 属性 .avi 


除了 7.1 节 中 介绍 的 表单 类 型 外 ， 在 HTML 5 页 面 中 还 可 以 使 用 属性 来 实现 我 们 需要 的 显示 功能 。 
本 节 将 详细 讲解 和 HTML 5 表单 相关 的 几 个 属性 ， 并 通过 具体 实例 来 讲解 其 实现 流程 。 


7.2.1 记 住 表单 中 的 数据 


在 HTML 5 的 <input> 元 素 中 ， 属 性 autofocus 是 一 个 布尔 值 ， 主 要 功能 是 当 加 载 页 面 完成 后 ， 设 置 
光标 是 否 自动 锁定 <input> 元 素 ， 即 是 否 使 元 素 自动 获取 焦点 。 在 <input> 元 素 中 ， 如 果 将 该 属性 的 值 设 
置 为 true 或 直接 输入 autofocus 属性 名 称 ， 那 么 对 应 的 元 素 将 自动 获取 焦点 。 


其 实 autofocus 属性 是 HTML 5 新 增 的 属性 ， 除 了 此 属性 外 ， 还 新 增 了 如 下 所 示 的 表单 属性 。 
(1) 新 的 form 属性 


回 autocomplete. 
回 novalidate。 
(2) 新 的 input 属性 
回 autocomplete. 
回 autofocus。 
回 form. 


g 


ea SORS TER ER 


form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) 。 
height 和 width. 

list. 

min. max 和 step. 

multiple. 

pattern (regexp)« 

placeholder. 


ARAARARRARA 


required. 


实例 7-7: 记 住 表单 中 的 数据 
源码 路 径 : 光盘 :\codes\7\7.html 


在 本 实例 的 表单 中 创建 了 两 个 文本 框 ， 一 个 用 于 输入 “姓名 ”， 另 一 个 用 于 输入 “密码 ”。 为 输 
入 “姓名 ”的 文本 框 设置 autofocus 属性 ， 当 成 功 加 载 页 面 或 单 击 表单 “提交 ”按钮 后 ， 拥 有 autofocus 
属性 的 “姓名 ”文本 框 会 自动 获取 焦点 。 实 例文 件 7.html 的 主要 代码 如 下 。 


<body> 
«form id="frmTmp"> 
<fieldset> 
«legend» JR autofocus«/legend» 
<p> 姓 名 : «input type="text" name-"txtName" 
class-"inputtxt" autofocus="true"></p> 
<p> 密 码 : «input type="password" name="txtPws" 
class="inputtxt"></p> 
<p class="p_center"> 
«input name="frmSubmit" type-"submit" 
class-"inputbtn" value "3 3z" /> 
«input name-"frmReset" type-"reset" 
class-"inputbtn" value=" 取 消 " /> 
«Ip» 
</fieldset> 
</form> 


</body> 
执行 后 首先 显示 两 个 表单 ， 如 图 7-12 所 示 。 ee 
假如 输入 姓名 “aaa”， 密 码 “111”， 单 击 “ 提 交 ” 按 钮 l 
后 会 弹出 是 否 保存 信息 的 选项 ， 如 图 7-13 所 示 。 e: 
如 果 选 择 “保存 ”， 则 当下 次 打开 这 个 网 页 时 ， 将 在 表单 
中 自动 输入 姓名 和 密码 ， 如 图 7-14 所 示 。 图 7.12 执行 效果 


gr o 取消 


意 编写 JavaScript 代码 来 实现 。 BRZDE Sc vU ET AARRE, Birk f Abre, 例如 
需要 通过 按 空格 键 滚动 页 面 时 ， 而 焦点 还 在 表单 的 文本 框 中 ， 因 此 空格 只 能 显示 在 文本 框 中 ， 并 不 能 
实现 页 面 的 滚动 。 

在 全 新 的 HTML 5 中 ， 由 于 实现 这 一 功能 的 不 再 是 JavaScript 代码 ， 而 是 元 素 的 属性 ， 所 以 所 有 页 
面 实现 该 功能 的 方法 都 是 一 致 的 ,避免 了 由 于 代码 实现 的 不 同 而 效果 不 一 样 的 情况 。 在 一 个 页 面 表单 中 ， 


e. 


建议 只 对 一 个 文本 框 设 置 autofocus 属性 ， 例 如 在 资料 录入 页 面 中 ， 只 对 第 一 个 文本 框 设 置 autofocus 属性 。 


Q SATEET. [I 避 为 此 页 面 保存 迁 RF MF x 元 成 


Wiltautofocus 
maS: | 
HAEE I 属性 sutofocus 
= mooo 
MATH: e 
提交 Wu 
器 & * 6 ooo = 
图 7-13 是 否 保存 信息 图 7-14 在 表单 中 自动 输入 姓名 和 密码 


72.2 ”验证 表单 中 输入 的 数据 是 否 合法 


TE HTML 5 网 页 中 ， 可 以 验证 在 表单 中 输入 的 数据 是 否 合法 ， 此 功能 是 通过 pattern 属性 实现 的 。 
在 HTML 5 '}, pattern 属性 用 于 验证 input 域 的 模式 (pattern) ， 这 里 的 模式 (pattern) 是 正则 表达 式 。 
pattern 属性 适用 于 以 下 类 型 的 <input> 标 签 。 
text。 
search. 
url. 
telephone. 
email. 


RARARA 


password. 

在 <input> 元 素 中 ，pattem 是 <input> 的 验证 属性 。 使 用 该 属性 中 的 正则 表达 式 ， 可 以 验证 文本 框 中 
的 内 容 。email、url 等 类 型 的 <input> 元 素 都 内 置 了 正则 表达 式 ， 当 创建 这 些 元 素 时 ,通过 与 内 容 进 行 匹 
配 的 方式 进行 有 效 性 验证 。 其 实 这 些 元 素 都 使 用 了 pattern 属性 ， 只 是 内 置 的 而 已 。 但 是 内 置 验证 的 元 
素 毕竟 较 少 ， 并 且 如 果 要 进行 组 合式 的 验证 ， 就 需要 使 用 pattem 属性 。 该 属性 支持 各 种 类 型 的 组 合 正 
则 表达 式 ， 用 来 验证 对 应 的 文本 框 中 的 内 容 。 


区 实例 7-8: 验证 表单 中 输入 的 数据 是 否 合法 
源码 路 径 : 光盘 :\codes\7\8.html 


在 本 实例 中 ， 首 先 在 表单 中 创建 一 个 text 类 型 的 <input> 元 素 ， 用 于 输入 “用 户 名 ”， 并 设置 元 素 
的 pattern 属性 ， 其 值 为 一 个 正则 表达 式 ， 用 来 验证 “用 户 名 ”是 否 符合 “以 字母 开头 ， 包 含 字符 或 数 
字 和 下 划 线 ,长 度 在 6 一 8 之 间 ” 规 则 。 单 击 表单 “提交 ”按钮 时 ， 文 本 框 中 的 内 容 与 表达 式 进行 匹配 ， 
如 果 不 符 ， 则 提示 错误 信息 。 实 例文 件 S.html 的 主要 代码 如 下 。 
<body> 
«form id="frmTmp"> 
<fieldset> 
<legend> 使 用 pattern 属性 : «/legend» 
用 户 名 : 
«input name-"txtAge" type-"text" 
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class-"inputtxt" patternz"^[a-zA-Z]w(5,7]$" /> 

<input name-"frmSubmit" type="submit" 
class-"inputbtn" value=" 提 交 " /> 
<p class-"p color" 
亲 ， 必 须 以 字母 开头 ,包含 字符 或 数字 和 下 划 线 ,长 度 在 6~8 之 间 ! 
«Ip» 
</fieldset> 
</form> 
</body> 


在 上 述 <input> 元 素 中 ， 所 有 的 文本 框 类 型 eimi: ą — 
都 支持 pattern 属性 ， 在 使 用 时 只 要 在 文本 框 中 mPa: [aad nz 
添加 一 个 pattern 属性 (如 代码 中 加 粗 部 分 所 示 ) Ru EEUU. 
即 可 通过 属性 中 各 种 组 合 类 型 的 正则 表达 式 验 L J 
证 文本 框 中 的 内 容 。 到 编写 本 书 时 为 止 ， 目 前 
只 有 Chrome 与 Opera 浏览 器 支持 该 属性 。 执行 
后 的 效果 如 图 7-15 所 示 。 


7.2.3 在 文本 框 中 显示 提示 信息 


TE HTML 5 网 页 中 ， 属 性 placeholder 能 够 提供 一 种 描述 输入 域 所 期 待 值 的 提示 。 属 性 placeholder 
适用 于 <input> 标 签 的 text、search、url、telephone、email 以 及 password 类 型 。 由 此 可 见 ，<input> 元 素 
中 的 placeholder 属性 是 一 种 “ 占 位 ”属性 ， 其 属性 值 是 一 种 “ 占 位 文本 ”。 所 谓 占 位 文本 就 是 显示 在 
文本 框 中 的 提示 信息 ， 当 文本 框 获 取 焦点 时 ， 该 提示 信息 自动 消失 ， 当 文本 框 丢失 焦点 时 ， 提 示 信 息 
又 重新 显示 。 

TE HTML 5 中 ， 设 置 元 素 的 placeholder 属性 后 ， 提 示 会 在 输入 域 为 空 时 出 现 ， 会 在 输入 域 获得 焦 
点 时 消失 。 


7-15 ”执行 效果 


实例 7-9: 在 文本 框 中 显示 提示 信和 4 
源码 路 径 : 光盘 :\codes\7\9.html 


在 本 实例 中 创建 一 个 类 型 为 email 的 <input> 元 素 ， 设 置 该 元 素 的 placeholder 属性 值 为 “要 输入 正 
确 的 邮件 地 址 ! ”。 当 页 面 初 次 加 载 时 ， 该 元 素 的 占 位 文本 显示 在 文本 框 中 ， 单 击 文本 框 时 占 位 文本 
将 自动 消失 。 实 例文 件 9.html 的 主要 代码 如 下 。 

<body> 

«form id-"frmTmp"» 

<fieldset> 
<legend> 属 性 placeholder«/legend» 
邮箱 : 


<input name="txtEamil" type="Email" 
class-"inputtxt" 
placeholder= "要 输入 正确 的 邮件 地 址 ! " /> 
«input name-"frmSubmit" type-"submit" 
class-"inputbtn" value=" 提 交 " /> 
</fieldset> 
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</form> 


</body> 


通过 上 述 代码 ， 如 果 需 要 在 表单 中 设置 文本 框 元 素 的 默认 提示 信息 〈 占 位 文本 ) ， 只 需 添加 该 元 
素 的 placeholder 属性 ， 并 设置 属性 的 内 容 即 可 。 单 击 “ 提 交 ” 按 钮 不 会 将 占 位 文本 作为 文本 框 中 的 内 
容 提 交 给 服务 器 。 执 行 后 的 初始 效果 如 图 7-16 所 示 。 

输入 非法 邮件 地 址 ， 单 击 “ 提 交 ” 按 钮 后 会 显示 对 应 的 提示 ， 如 图 7-17 所 示 。 


属性 placehol der， 

ssi: [aad 
属性 nesahlir 一 一 一 一 一 一 一 一 一 一 一 加 请 输入 电子 邮件 地 址 。 
邮箱 t 


7-16 初始 效果 717 ATRA 


注意 : 虽然 利用 文本 框 的 placeholder 属 性 可 以 很 方便 地 实现 动态 显示 提示 信息 的 功能 , 但 是 当 内 容 过 长 
时 还 是 建议 使 用 元 素 的 title 属 性 来 显示 。 并 且 文 本 框 的 placeholder 属 性 值 只 支持 纯 文本 ， 目 前 还 
不 支持 HTML 语 法 ， 也 不 能 修改 占 位 文本 的 样式 。 


7.2.4 验证 文本 框 中 的 内 容 是 否 为 空 


在 HTML 5 页 面 中 , 可 以 使 用 属性 required 验证 文本 框 中 的 内 容 是 否 为 空 。 属性 required 适用 于 以 
下 类 型 的 <input> 标 签 。 
text。 

Search 。 

url。 
telephone。 
email. 
password. 
date pickers. 
number. 
checkbox 。 
radio. 

file. 

在 HTML 5 t}, email 或 url 类 型 的 <input> 元 素 在 提交 表单 时 都 要 进行 内 容 验证 。 这 种 验证 仅 针对 
文本 框 中 的 内 容 是 否 符合 各 自 所 属 的 类 型 ， 不 对 文本 框 中 的 文本 内 容 是 否 为 空 进行 验证 ， 即 只 验证 非 
空 内 容 。 由 此 可 见 ， 只 要 在 验证 元 素 中 添加 一 个 required 属性 ， 就 可 以 对 其 内 容 是 否 为 空 自动 进行 验 
证 。 如 果 为 空 ， 在 表单 提交 数据 时 会 显示 错误 提示 信息 。 


区 实例 7-10: 验证 文本 框 中 的 内 容 是 否 为 空 
源码 路 径 : 光盘 :\codes\7\10.html 


在 本 实例 的 表单 中 ， 创 建 了 一 个 用 于 输入 “姓名 ”的 text 类 型 <input> 元 素 ， 并 在 该 元 素 中 添加 了 
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一 个 required 属性 ， 并 将 属性 值 设 置 为 true。 当 用 户 单 击 表单 “提交 ”按钮 时 ， 将 自动 验证 文本 框 中 内 
容 是 否 为 空 。 如 果 为 空 ， 则 会 显示 错误 信息 。 实 例文 件 10.html 的 主要 代码 如 下 。 


<body> 
<form id="frmTmp"> 
<fieldset> 
<legend> 属 性 required</legend> 
姓名 : 
«input name-"txtUserName" type="text" 
class-"inputtxt" required /> 
<input name-"frmSubmit" type="submit" 
class-"inputbtn" value=" 提 交 " /> 
</fieldset> 
</form> 


</body> 


在 上 述 页 面 的 表单 中 ， 如 果 需 要 验证 某 个 文本 框 的 内 容 〈 必 须 不 为 空 值 ) ， 只 要 添加 一 个 required 
属性 ， 并 将 该 属性 的 值 设置 为 true 或 只 是 增加 属性 名 称 required 即 可 。 设 置 完成 后 ， 在 表单 提交 时 ， 
将 自动 检测 该 文本 框 中 的 内 容 是 否 为 空 。 编 写本 书 时 ， 只 有 Chrome 与 Opera 浏览 器 支持 文本 框 的 
required 属性 。 在 Opera 浏览 器 中 的 执行 效果 如 图 7-18 所 示 。 


[rer EMT EI 
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图 7-18 执行 效果 
7.2.5 ”开启 表单 的 自动 完成 功能 


在 全 新 的 HTML 5 中 ， 使 用 属性 autocomplete 可 以 设置 form £X input 域 拥有 自动 完成 功能 。 属 性 
autocomplete 适用 于 <form> 标 签 ， 以 及 <input> 标签 中 的 text, search, url. telephone, email, password. 
datepickers、range 和 color 类 型 。 当 用 户 在 自动 完成 域 中 开始 输入 时 ,浏览 器 应 该 在 该 域 中 显示 填写 的 
选项 。 在 某 些 浏 览 器 中 ， 可 能 还 需要 启用 自动 完成 功能 ， 以 使 该 属性 生效 。 


区 实例 7-11: 开启 表单 的 自动 完成 功能 
源码 路 径 : J6di codes 711.html 


实例 文件 11.html 的 主要 代码 如 下 。 


<body> 
«form action="123.asp" method-"get" autocomplete="on"> 


e. 


WIBOWERBERXE 000 


姓 :<input type-"text" name-"fname" /><br /> 

名 : «input type="text" name-"Iname" /><br /> 

E-mail: «input type-"email" name-"email" autocomplete-"off" /><br /> 

«input type-"submit" /> 

</form> 

<p> 请 填写 并 提交 此 表单 ， 然 后 重 载 页 面 ， 来 查看 自动 完成 功能 是 如 何 工作 的 。</p> 
<p> 请 注意 ， 表 单 的 自动 完成 功能 是 打开 的 ， 而 e-mail 域 是 关闭 的 。</p> 

</body> 


执行 后 的 效果 如 图 7-19 所 示 。 


MP overa | Ah placeholder... x [AB placeholder... > | 
€ > Q > [P 本 地 lcdhsUE,X)|[]- 使 用 百 
#:faa 

名 : faa 

Fail [EGG 


E 从 办 入 一 个 有 效 的 电子 闻 件 地 址 
m 看 自动 完成 功能 是 如 何 工作 的 。 


请 注意 ,表单 的 自动 完成 功能 是 打开 的 ,而 email 域 是 关闭 的 。 


Beso — — 


图 7-19 执行 效果 
7.2.0 重 写 表单 中 的 某 些 属性 


在 全 新 的 HTML 5 中 ， 通 过 表单 重 写 属 性 (form override attributes) 可 以 重 写 form. 元 素 的 某 些 属 
性 设 定 。HTML 5 中 的 表单 重 写 属性 有 以 下 几 个 。 

回 formaction: 重 写 表 单 的 action 属性 。 

E] formenctype: 重 写 表单 的 enctype 属性 。 

El formmethod: 重 写 表单 的 method 属性 。 

El formnovalidate: 重 写 表单 的 novalidate 属性 。 

E] formtarget: 重 写 表单 的 target 属性 。 

表单 重 写 属性 适用 于 以 下 类 型 的 <input> 标 签 。 

名 submit. 

回 image. 


实例 7-12: 重 写 表单 中 的 某 些 属性 
源码 路 径 : 光盘 :\codes\7\12.html 


实例 文件 12.html 的 主要 代码 如 下 。 


<body> 
«form action-"demo form.asp" method="get" id="user form" 

E-mail: «input type-"email" name-"userid" /><br /> 

«input type="submit" value-"Submit" /» «br /> 

«input type="submit" formaction-"/example/html5/demo  admin.asp" value-"Submit as admin" /><br /> 
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«input type-"submit" formnovalidate-"true" value-"Submit without validation" /><br /> 
</form> 


执行 后 的 效果 如 图 7-20 所 示 。 
7.2.7 自动 设置 表单 中 传递 数字 


在 HIML 5 网 页 中 ， 使 用 属性 min、max 和 step 请 广 入 一 个 有 效 的 电子 邮件 地 址 
可 以 为 包含 数字 或 日 期 的 input 类 型 规定 限定 (约束 )。 Submit vito volidation | 


这 3 个 属性 的 具体 说 明 如 下 。 
max 属性 : 规定 输入 域 所 允许 的 最 大 值 。 
E] min 属性 : 规定 输入 域 所 允许 的 最 小 值 。 加 = 全 =- 并 -所 = 
回 step 属性 : 为 输入 域 规定 合法 的 数字 间隔 (如 720 执行 效果 


果 step="3"， 则 合法 的 数 是 -3、0、3、6 55). 
属性 min、max 和 step 适用 于 以 下 类 型 的 <input> 标签 。 
E] date pickers. 
E number. 
W range. 


ic 实例 7-13: 自动 设置 表单 中 传递 数字 
-| 源码 路 径 : 光盘 :codes\\13htm sul 

在 本 实例 中 显示 了 一 个 数字 域 ， 该 域 接受 0 一 10 之 间 的 值 , 且 步 进 为 3。 也 就 是 说 , 合法 的 值 为 0、 
3、6 和 9。 实 例文 件 13.html 的 具体 实现 代码 如 下 。 


<body> 

«form action="/example/html5/demo_form.asp" method="get"> 

Points: «input type="number" name-"points" min="0" max="10" step="3"/> 
<input type="submit" /> 

</form> 

</body> 


执行 上 述 代码 后 ， 可 以 使 用 小 箭头 自动 输入 从 0 开始 的 逐步 递增 3 的 数字 ， 如 图 7-21 所 示 。 如 果 
输入 的 数字 不 符合 规则 ， 单 击 “ 提 交 ” 欣 包 后 则 输出 对 应 的 提示 ， 如 图 7-22 所 示 。 
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此 表单 不 允许 数字 4。 此 输入 框 只 允许 特定 
的 数字 。 


Beso 4 o——— 


jets ~ 一 一 一 
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m, 


722 ”非法 提示 


7.2.8 在 表单 中 选择 多 个 上 传 文件 


在 全 新 的 HTML 5 中 , 使 用 属性 multiple 可 以 设置 在 输入 域 中 选择 多 个 值 。 属性 multiple 适用 于 如 
下 两 种 类 型 的 <input> 标 签 。 

E email. 

file. 


区 实例 7-14: 在 表单 中 选择 多 个 上 传 文件 
源码 路 径 : JC codes 7 14.html 


在 本 实例 中 设置 了 一 个 查询 表单 ， 单 击 “浏览 ” 按 钮 后 弹出 文件 选择 对 话 框 ， 在 此 可 以 选择 多 个 
上 传 文件 。 实 例文 件 14.html 的 主要 代码 如 下 。 


<body> 

«form action="demo_form.asp" method="get"> 

Select images: «input type-"file" name-"img" multiple="multiple" /> 
«input type="submit" /> 

</form> 

<p> 当 您 浏览 文件 时 ， 请 试 着 选择 多 个 文件 。</p> 

</body> 


执行 后 的 效果 如 图 7-23 所 示 。 
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图 7-23 执行 效果 


7.3 新 的 表单 元 素 


Ba 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 7 章 \ 新 的 表单 元 素 .avi 
在 全 新 的 HTML 5 页 面 中 ,可 以 支持 很 多 新 的 表单 元 素 。 本 节 将 详细 介绍 这 些 新 元 素 的 基本 用 法 ， 
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为 读者 步 入 本 书后 面 知识 的 学 习 打下 基础 。 
7.3.1 在 表单 中 自动 提示 输入 文本 


在 表单 中 自动 提示 输入 文本 ， 这 一 功能 在 搜索 引擎 中 比较 常见 。 例 如 使 用 百度 检索 信息 时 ， 会 在 
下 拉 列 表 框 中 自动 提示 一 些 热 点 信息 ， 如 图 7-24 所 示 。 


UD 
Baid 百度 


新 闻 网 页 贴吧 知道 MP3 图 片 视频 地 图 
HTML5 百度 一 下 
html 5 与 css 3 权威 指南 

| htmi 500 
html5 是 什么 
htmI5 浏 览 器 
html5 教程 
html5 开发 工具 
html5 video 
html5test 
html5 flash 

| html5 测 试 


图 7-24 百度 的 自动 提示 


在 全 新 的 HTML 5 中 ， 使 用 <datalist> 元 素 可 以 设置 输入 域 的 选项 列表 。 列 表 是 通过 <datalist> 内 的 
<option> 元 素 创建 的 ， 如 需 把 <datalist> 绑 定 到 输入 域 ， 可 用 输入 域 的 list 属性 引用 <datalist> 的 ID 。 
<datalist> 是 HTML 5 中 新 增 的 元 素 ， 该 元 素 的 功能 是 辅助 表单 中 文本 框 的 数据 输入 。 

<datalist> 元 素 本 身 是 隐藏 的 ， 与 表单 文本 框 的 list 属性 绑 定 ， 即 将 list 属性 值 设 置 为 <datalist> 元 素 
的 ID 号 。 绑 定 成 功 后 ,用 户 单 击 文本 框 准备 输入 内 容 时 ，<datalist> 元 素 以 列表 的 形式 显示 在 文本 框 的 
底部 ， 提 示 输 入 字符 的 内 容 。 当 用 户 选中 列表 中 的 某 个 选项 后 ，<datalist> 元 素 将 自动 隐藏 ， 同 时 在 文 
本 框 中 显示 所 选择 的 内 容 。<datalist> 元 素 中 的 列表 内 容 可 以 动态 修改 ， 支 持 与 表单 中 的 各 类 型 的 文本 
框 ， 如 email、url、text 等 进行 绑 定 。 


区 实例 7-15: 在 表单 中 自动 提示 输入 文本 
- 源码 路 径 : Jit codes 7 15.html 


在 本 实例 页 面 的 表单 中 ， 新 增 了 一 个 ID 号 为 lstWork 的 <datalist> 元 素 。 然 后 创建 了 一 个 文本 框 ， 
并 将 文本 框 的 list 属性 设置 为 lstWork， 即 将 文本 框 与 <datalist> 元 素 进 行 绑 定 。 当 单 击 文本 框 时 ， 将 显 
示 <datalist> 元 素 中 的 列表 项 。 实 例文 件 15.html 的 主要 代码 如 下 。 
«form id-"frmTmp"» 
<fieldset> 
<legend> 请 输入 职业 : «legend» 
«input type="text" id-"txtWork" 
list-"IstWork" class-"inputtxt" /> 
«datalist id-"IstWork" 
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<option value=" 设 计 师 "></option> 
«option value=" 软 件 工程 师 "></option> 
«option value=" 厨 师 "></option> 
</datalist> 
</fieldset> 
</form> 


在 上 述 代码 中 ， 要 将 <datalist> 元 素 与 文本 框 相互 绑 请 输入 职业 : 
定 ， 只 需 将 文本 框 的 list 属性 设置 为 <datalist> 元 素 的 ID m 
号 即 可 。 在 Opera 浏览 器 中 的 执行 效果 如 图 7-25 所 示 。 
由 图 7-25 的 执行 效果 可 知 , 虽然 <datalist> 与 <input> 
元 素 的 关系 十 分 密切 ， 但 两 者 还 是 属于 不 同 实体 的 两 个 图 7-25 执行 效果 
元 素 ， 无 法 融合 成 一 个 独立 的 新 元 素 。 这 也 是 出 于 对 浏 
览 器 兼容 性 的 考虑 ， 因 为 如 果 合 成 为 一 个 元 素 ， 那 么 不 兼容 <datalist> 元 素 的 浏览 器 也 无 法 使 用 与 其 绑 
定 的 文本 框 ， 这 会 约束 <input> 元 素 中 文本 框 的 使 用 范围 。 


7.3.2 ”一 个 简单 的 乘法 计算 器 


在 全 新 的 HTML 5 中 , 使 用 <output> 元 素 可 以 实现 不 同类 型 信息 的 输出 , 例如 计算 或 脚本 输出 。 该 
元 素 必须 从 属于 某 个 表单 ， 或 通过 属性 指定 某 个 表单 。 该 元 素 的 功能 是 在 页 面 中 显示 各 种 不 同类 型 表 
单元 素 的 内 容 ， 如 文本 框 的 值 、JavaScript 代码 执行 后 的 结果 值 等 。 为 了 获取 这 些 值 , 需要 设置 <output> 
元 素 的 onFormInput 事件 。 在 表单 文本 框 中 输入 内 容 时 ， 触 发 该 事件 ， 从 而 十 分 方便 地 实时 侦察 表单 
中 各 元 素 的 输入 内 容 。 

区 E | 实例 7-16: 一 个 简单 的 乘法 计算 器 

.| 源码 路 径 : Jéfbeodes7l6html —— sss 

本 实例 的 功能 是 ,在 新 建 的 表单 中 创建 两 个 文本 框 ,分 别 用 于 输入 两 个 数字 。 然 后 新 建 一 个 <output> 
元 素 , 用 于 显示 两 个 文本 框 中 数字 相 乘 后 的 结果 。 当 改变 两 个 文本 框 中 任意 一 个 数值 时 ，<output> 元 素 
显示 的 计算 结果 也 将 自动 发 生变 化 。 实 例文 件 16.html 的 主要 代码 如 下 。 


<body> 
«form id-"frmTmp"» 
<fieldset> 
<legend> 输 入 两 个 数字 </legend> 
«input id="txtNum_1" type="text" 
class-"inputtxt" /> * 
«input id="txtNum_2" type="text" 
class-"inputtxt" /> = 
«output onFormlInput- 
"value-txtNum 1.value*txtNum 2.value" 
</output> 
</fieldset> 
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在 上 述 代 码 中 ,因为 将 <output> 元 素 的 内 容 通过 onFormInput 事件 绑 定 了 两 个 文本 框 ， 因 此 ， 当 文本 框 
中 的 值 发 生变 化 时 ，<output> 元 素 的 内 容 根据 绑 定 的 规则 迅速 响应 ， 这 样 便 实 现 了 一 种 联动 的 效果 。 另 外 ， 
<output> 元 素 的 value 值 为 txtNum Lvalue*txtNum 2. 
value， 这 表示 将 显示 的 内 容 绑 定 为 两 个 文本 框 值 的 乘 。 [第 本数 
积 ， 这 一 点 和 this.innerHTML 的 表示 方法 类 似 。 此 外 ， 12 uH 
也 可 以 通过 编写 JavaScript 自 定义 函数 ， 与 onFormInput Kl Taa 
事件 绑 定 来 实现 。 执 行 效果 如 图 7-26 所 示 。 


7.3.8 在 网 页 中 生成 一 个 密 钥 


在 全 新 的 HTML 5 中 ，<keygen> 元 素 是 一 项 密 钥 对 生成 器 Ckey-pair generator) 技术 。 当 提交 表单 
时 会 生成 两 个 键 ， 一 个 是 私 铀 ， 另 一 个 是 公 钥 。 其 中 私 钥 (Private Key) 存储 于 客户 端 ， 公 钥 (Public 
Key) 则 被 发 送 到 服务 器 。 公 钥 可 用 于 之 后 验证 用 户 的 客户 端 证 书 〈Client Certificate) 。 但 是 截至 本 书 
出 版 之 时 ， 浏 览 器 对 此 元 素 的 支持 度 仍 不 足以 使 其 成 为 一 种 有 用 的 安全 标准 。 


图 7-26 执行 效果 


实例 7-17: 在 网 页 中 生成 一 个 密 钥 
源码 路 径 : 光盘 :\codes\7\17.html 


在 本 实例 的 表单 中 ， 新 建 了 一 个 name 值 为 keyUserInfo 的 <keygen> 元 素 ， 通 过 此 元 素 可 以 在 页 面 
中 创建 一 个 选择 密 钥 位 数 的 下 拉 列 表 框 。 当 选择 列表 框 中 某 选 项 ， 单 击 表 单 的 “提交 ”按钮 时 ， 可 以 
根据 所 选 密 钥 的 位 数 生成 对 应 密 钥 提交 给 服务 器 。 实 例文 件 17.html 的 具体 实现 代码 如 下 。 
<body> 
«form id="frmTmp"> 
<fieldset> 
<legend> 选 择 密 钥 位 数 </legend> 
«keygen name-"keyUserlnfo" class-"inputtxt" /> 
«input name-"frmSubmit" type="submit" 
class-"inputbtn" value=" 提 交 " /> 
</fieldset> 
</form> 
</body> 


在 上 述 代码 中 ，<keygen> 元 素 在 表单 中 以 列表 的 形式 展示 密 钥 位 数 的 选择 。 当 提交 表单 时 ， 可 以 
通过 <keygen> 元 素 在 表单 中 的 name 值 获取 该 元 素 生 成 的 对 应 
位 数 密 钥 。 另外 ，<keygen> 元 素 中 keyType 属性 表明 生成 密 钥 RUN 
的 类 型 , 如 设置 为 rsa, 则 以 rsa 加 密 类 型 生成 相应 位 数 的 密 钥 。 | TUE bo mm 
编写 本 书 时 ， 只 有 Chrome 与 Opera 浏览 器 支持 该 元 素 。 执 行 
效果 如 图 7-27 所 示 。 


727 执行 效果 


e. 


第 8 章 ”音频 和 视频 应 用 


在 HTML 5 标记 语言 中 ， 支 持 在 页 面 中 直接 播放 音频 和 视频 文件 的 功能 ， 这 样 大 大 增加 了 网 页 的 
美观 性 。 本 章 将 详细 介绍 在 HTML 5 页 面 中 实现 播放 音频 和 视频 文件 的 方法 ， 并 通过 几 个 具体 实例 来 
演示 有 具体 流程 。 
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GB 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 8 章 \ 处 理 视频 .avi 
通过 使 用 HTML 5 技术 ， 可 以 在 网 页 中 实现 视频 处 理 功能 ， 并 且 仅 需要 短 短 的 几 行 代码 就 可 以 实 
现 。 本 节 将 详细 讲解 HTML 5 处 理 视频 的 基本 知识 ， 为 读者 步 入 本 书后 面 知 识 的 学 习 打 下 基础 。 


8.1.1 <video> 标 记 


直到 现在 为 止 ， 仍然 没有 在 网 页 上 显示 视频 的 标准 。 在 这 之 前 是 通过 插件 来 显示 Web 页 面 上 的 视 
频 ， 例 如 Flash。 现 在 HTML 5 中 新 增 了 标记 <video>， 通 过 该 标记 可 以 在 网 页 中 播放 及 控制 视频 。 

当前 ，<video> 标 记 支 持 如 下 3 种 视频 格式 。 

回 Ogg: 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 

E] MPEG 4: 带 有 HH.264 视频 编码 和 AAC 音频 编码 的 MPEG 4 文件 。 

E] WebM: 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 WebM 文件 。 

ER 3 种 格式 在 主流 浏览 器 版 本 的 支持 信息 如 表 8-1 所 示 。 


表 8-1 主流 浏览 器 版 本 支持 <video> 标 记 的 情况 


Firefox Chrome Safari 
Ogg | No 354 8.04 | No 
MPEG 4 4 No 8.04 3.0* 
6.0+ No 


<video> 标 记 的 使 用 格式 如 下 。 


«video src-"movie.ogg" controls="controls"> 

«video» 

参数 说 明 如 下 。 

E] controls: 供 添加 播放 、 和 暂停 和 音量 控件 。 

回 ”<video> 与 </video> 之 间 插 入 的 内 容 : 供 不 支 持 <video> 元 素 的 浏览 器 显示 。 
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例如 下 面 的 代码 。 


«video src-"movie.ogg" width="320" height="240" controls="controls"> 
你 的 浏览 器 不 支持 这 种 格式 
</Video> 
在 上 述 代码 中 使 用 了 Ogg 格式 的 视频 文件 ， 此 格式 视频 适用 于 Firefox. Opera 以 及 Chrome 浏览 
器 。 如 果 要 确保 在 Safari 浏览 器 也 能 使 用 ， 则 视频 文件 必须 是 MPEG 4 类 型 。 
另外 ，<video> 标 记 人 允许 多 个 <source> 元 素 。<source> 元 素 可 以 链接 不 同 的 视频 文件 。 浏 览 器 将 使 
用 第 一 个 可 识别 的 格式 。 例 如 下 面 的 代码 。 
«video width="320" height-"240" controls="controls"> 
«source src-"movie.ogg" type="video/ogg "> 
«source src-"movie.mp4" type="video/mp4"> 
你 的 浏览 器 不 支持 这 种 格式 
</video> 
注意 : IE 8 不 支持 <video> 标 记 。 在 IE 9 中 ， 将 提供 对 使 用 MPEG 4 的 <video> 元 素 的 支持 。 


8.1.2 ”<video> 标 记 的 属性 


<video> 标 记 中 各 个 属性 的 具体 说 明 如 表 8-2 所 示 。 
表 8-2 ”<video> 的 属性 信息 


m 性 值 描述 
autopla autopla 如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 马上 播放 
controls controls 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 如 播放 按钮 
height pixels 设置 视频 播放 器 的 高 度 
loop loop 如 果 出 现 该 属性 ， 则 当 媒 介 文 件 完成 播放 后 再 次 开始 播放 
如 果 出 现 该 属性 ， 则 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 果 使 
gend poa 用 autoplay， 则 忽略 该 属性 
src url 要 播放 的 视频 的 URL 
width pixels 设置 视频 播放 器 的 宽度 


1. autoplay 属性 
通过 autoplay 属性 设置 自动 播放 <video> 中 设置 的 视频 。 


实例 8-1: 在 网 页 中 自动 播放 一 个 视频 000— 
源码 路 径 : 光盘 :\codes\8\1.html 


实例 文件 1.html 的 主要 代码 如 下 。 


«video controls="controls" autoplay="autoplay"> 
«source src-"movie.ogg" type-"video/ogg" /> 
«source src-"movie.mp4" type-"video/mp4" /> 

Your browser does not support the video tag. 

</Video> 
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上 述 代码 的 功能 是 在 网 页 中 自动 播放 名 为 movie.ogg 的 视频 文件 ,在 代码 中 设置 的 此 视频 文件 和 实 
例文 件 autoplay.html 同属 于 一 个 目录 下 。 执 行 后 的 效果 如 图 8-1 所 示 。 


2. controls 属性 


controls 属性 的 功能 是 设置 在 浏览 器 中 显示 播放 器 的 控制 按钮 ， 设 置 浏览 器 控件 应 该 包括 下 面 的 控 
制 功能 。 


c 实例 82: 在 网 页 中 控制 播放 的 视频 
b 源码 路 径 : 光盘 :\codes\S\2.html 


实现 文件 2.html 的 主要 实现 代码 如 下 。 
«video controls-"controls" controls-"controls"» 
<source src-"movie.ogg" type-"video/ogg" /> 
<source src-"movie.mp4" type-"video/mp4" /> 
你 的 浏览 器 不 支持 ! 
</video> 
通过 上 述 代码 ， 设 置 在 网 页 中 播放 名 为 movie.ogg 的 视频 文件 ， 并 且 在 播放 时 可 以 控制 这 个 视频 ， 
例如 播放 进度 。 执 行 后 的 效果 如 图 8-2 所 示 。 


图 8-1 执行 效果 图 8-2 执行 效果 
3. height 属性 
通过 使 用 height 属性 可 以 设置 播放 视频 的 高 度 ， 使 用 格式 如 下 。 
«video height-" value" /> 


value 表示 属性 值 ， 单 位 是 pixels， 即 以 像素 计 的 高 度 值 ， 如 100px EÈ 100. 
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区 实例 8-3: 在 网 页 中 设置 播放 视频 的 高 度 
- 源码 路 径 : Jti codesS3.html 


实例 文件 3html 的 主要 实现 代码 如 下 。 
«video width-"500" height-"600" controls="controls"> 
<source src-"movie.ogg" type-"video/ogg" /> 
<source src-"movie.mp4" type-"video/mp4" /> 
你 的 浏览 器 不 支持 ! 
«lvideo» 
通过 上 述 代 码 , 设置 在 网 页 中 播放 名 为 movie.ogg 的 视频 文件 , 并 且 设 置 视频 播放 器 的 高 度 为 600。 
执行 后 的 效果 如 图 8-3 所 示 。 


图 8-3 执行 效果 
注意 : 尽量 不 要 通过 height 和 width 属 性 来 缩放 视频 。 通 过 height 和 width 属 性 来 缩小 视频 ， 只 会 迫使 用 户 
下 载 原始 的 视频 (即使 在 页 面 上 它 看 起 来 较 小 ) 。 正 确 的 方法 是 在 使 用 该 视频 前 ， 使 用 软件 对 
视频 进行 压缩 。 
另外 ，width 与 height 属 性 的 用 法 完全 一 样 ， 其 功能 是 设置 播放 视频 的 宽度 ， 不 再 详细 介绍 。 
4. loop 属性 
loop 属性 的 功能 是 设置 当 视 频 结 束 后 将 重新 开始 播放 ， 设 置 此 属性 后 该 视频 将 循环 播放 。 
5. preload 属性 
preload 属性 的 功能 是 设置 是 否 在 页 面 加 载 后 载 入 视频 。 设 置 autoplay 属性 会 忽略 该 属性 。 
6. src 属性 
src 属性 的 功能 是 设置 要 播放 的 视频 的 URL， 另 外 也 可 以 使 用 标签 <source> 来 设置 要 播放 的 视频 。 
在 HIML 5 中 有 如 下 两 种 视频 文件 的 URL。 


回 绝对 URL 地 址 : 指向 另 一 个 站 点 ， 例 如 href-http://www.xxxxxx.com/123.ogg. 
相对 URL 地 址 : 指向 网 站 内 的 文件 ， 例 如 href-"123.ogg". 


e. 


sss sapanta 000 
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Gau 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 8 章 \ 处 理 音频 .avi 
既然 HTML 5 能 够 处 理 视频 ， 所 以 音频 处 理 自然 也 不 在 话 下 。 使 用 全 新 的 HTML 5 技术 ， 可 以 在 
网 页 中 处 理 音 频 。 本 节 将 介绍 使 用 HTML 5 处 理 音频 的 基本 方法 。 


8.2.1 <audio> 标 记 


和 视频 功能 一 样 ， 到 目前 为 止 ， 各 大 组 织 还 没有 统一 在 网 页 上 播放 音频 的 标准 。 当 前 大 多 数 音频 
都 是 通过 第 三 方 插件 来 实现 的 ， 例 如 Flash. fH HTML 5 的 推出 非常 轻松 地 解决 了 这 个 问题 ， 使 用 新 增 
的 标记 <audio> 可 以 在 网 页 中 播放 一 个 音频 。 
通过 <audio> 标 记 元 素 可 以 播放 声音 文件 或 者 音频 流 。 现 在 的 <audio> 标 记 支持 3 种 音频 格式 ， 这 3 
种 格式 在 主流 浏览 器 版 本 的 支持 信息 如 表 8-3 所 示 。 
表 8-3 主流 浏览 器 版 本 支持 <audio> 标 记 的 情况 


说 明 | IE9 | Fress | Opera105 | chome30 | Safar30 
Se J -Moa po wo ww 
wo o | | | 
TE 


要 想 在 HTML 5 中 播放 音频 ， 只 需 通 过 如 下 代码 即 可 实现 。 


«audio src-"song.ogg" controls="controls"> 
</audio> 


El controls 属性 : 供 添 加 播放 、 和 暂停 和 音量 控件 。 
加 ”<audio> 与 </audio> 之 间 插 入 的 内 容 : 供 不 支 持 <audio> 元 素 的 浏览 器 显示 。 
例如 在 下 面 的 演示 代码 中 , 使 用 一 个 ogg 格式 的 音频 文件 , 可 以 适用 于 Firefox、Opera 以 及 Chrome 
浏览 器 。 要 想 确保 适用 于 Safari 浏览 器 ， 则 音频 文件 必须 是 MP3 或 Wav 类 型 。 
«audio src-"song.ogg" controls="controls"> 
你 的 浏览 器 不 支持 ! 
</audio> 
在 标记 <audio> 中 允许 有 多 个 <source> 元 素 ， 通 过 <source> 元 素 可 以 链接 不 同 的 音频 文件 ， 浏 览 
将 使 用 第 一 个 可 识别 的 格式 。 例 如 下 面 的 代码 。 
«audio controls="controls"> 
«source src-"song.ogg" type="audio/ogg"> 
«source src-"song.mp3" type-"audio/mpeg" 
你 的 浏览 器 不 支持 ! 


</audio> 
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8.22 ”<audio> 标 记 的 属性 


<audio> 标 记 中 各 个 属性 的 具体 说 明 如 表 8-4 所 示 。 
表 8-4 <audio> 的 属性 信息 


如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 
如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 如 播放 按钮 


autoplay autoplay 


controls controls 
loop loop 如 果 出 现 该 属性 ， 则 每 当 音 频 结束 时 重新 开始 播放 

如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 ; 如 果 使 
preload preload 


用 autoplay， 则 忽略 该 属性 


1. autoplay 属性 


autoplay 属性 的 功能 是 在 网 页 中 自动 播放 指定 音频 。autoplay 属性 严格 规定 : 一 旦 音频 就 绪 马 上 开 
始 播放 ， 并 且 是 自动 播放 。 


实例 文件 4html 的 主要 实现 代码 如 下 。 


«audio controls="controls" autoplay="autoplay"> 

<source src-"song.mp3" type="audio/mpeg" /> 
Your browser does not support the audio element. 
<laudio> 


上 述 代 码 的 功能 是 在 网 页 中 自动 播放 名 为 song.mp3 的 音频 文件 ,在 代码 中 设置 的 此 音频 文件 和 实 
例文 件 yinautoplay.html 同属 于 一 个 目录 下 。 执 行 后 的 效果 如 图 8-4 所 示 。 


lI i 00:02 4) 
图 8-4 执行 效果 
2. controls 属性 
controls 属性 的 功能 是 设置 在 网 页 中 显示 播放 器 的 控制 控件 。 如 果 设 置 了 该 属性 ， 可 以 在 播放 器 中 
显示 下 面 的 控制 功能 。 
回 播放 。 
回 暂停 。 
回 定位 。 
[ral 音量 。 
回 全屏 切换 
回 “字幕 。 
回音 轨 。 
e. 


实例 文件 5 


实例 8-5: 网 页 中 控制 播放 的 音频 
源码 路 径 : 光盘 :\codes\8\5 .html 


-html 的 主要 实现 代码 如 下 。 


«audio controls="controls"> 
<source src-"song.ogg" type-"audio/ogg" /> 
<source src-"song.mp3" type-"audio/mpeg" /> 
你 的 浏览 器 不 支持 ! 


</audio> 


在 上 述 代码 中 ， 设 置 在 网 页 中 播放 指定 的 音频 文件 ， 并 且 在 播放 时 可 以 进行 控制 ， 例 如 播放 进度 
和 和 暂停 等 。 执 行 后 的 效果 如 图 8-5 所 示 。 


> i 00:06 中 


8-5 执行 效果 


3. loop 属性 
loop 属性 的 功能 是 设置 当 音 频 结 束 后 将 重新 开始 播放 ， 设 置 该 属性 后 将 循环 播放 该 音频 。 


实例 文件 6 


实例 8-6: 在 网 页 中 循环 播放 音频 
源码 路 径 : 光盘 :\codes\8\6.html 


«audio controls="controls" loop="loop"> 
«source src-"song.mp3" type-"audio/mpeg" /> 
你 的 浏览 器 不 支持 ! 


</audio> 


.html 的 主要 实现 代码 如 下 。 


在 上 述 代码 中 ， 设 置 在 网 页 中 循环 播放 指定 的 音频 文件 ， 执 行 后 的 效果 如 图 8-6 所 示 。 


T 00:01 中 


图 8-6 执行 效果 


4. preload 属性 


preload 属性 的 功能 是 设置 是 否 在 页 面 加 载 后 载 入 音频 ， 如 果 设 置 了 autoplay 属性 ， 则 忽略 该 属性 
的 功能 。 使 用 preload 属性 的 格式 如 下 。 


«audio preload-"load" /> 
load 用 于 规定 是 否 预 加 载 音频 ， 可 能 有 如 下 3 个 取 值 。 


回 auto: 
E meta: 


回 none: 


当 页 面 加 载 后 载 入 整个 音频 。 
当 页 面 加 载 后 只 载 入 元 数据 。 
当 页 面 加 载 后 不 载 入 音频 。 


E Android RED RUSTER HERE 


5. src 属性 


sre 属性 的 功能 是 设置 要 播放 的 音频 的 URL， 另 外 也 可 以 用 标签 <source> 来 设置 要 播放 的 音频 的 
URL. f£ HTML 5 中 有 如 下 两 种 音频 文件 URL。 

E] 绝对 URL 地 址 : 指向 另 一 个 站 点 ， 例 如 href-http://www.xxxxxx.com/song.ogg.« 

EI ”相对 URL 地 址 : 指向 网 站 内 的 文件 ， 例 如 hre 全 "song.ogg"。 
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Gu 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 8 章 \ 高 级 应 用 .avi 
8.1 节 和 8.2 节 已 经 讲解 了 HTML 5 处 理 视频 和 音频 的 基本 知识 。 本 节 将 进一步 讲解 HTML 5 处 理 
视频 和 音频 的 高 级 知识 ， 为 读者 步 入 本 书后 面 知识 的 学 习 打 下 基础 。 


8.3.1 为 播放 的 视频 准备 一 幅 素材 图 片 


在 HTML 5 的 <video> 元 素 中 ，poster 属性 表示 所 选 图 片 的 URL， 如 果 添 加 该 属性 ， 则 在 视频 文件 
播放 前 显示 该 图 片 ， 而 不 是 默认 显示 视频 文件 的 第 一 帧 。 另 外 ， 添 加 该 属性 ， 还 可 以 避免 在 播放 的 视 
频 文件 不 可 用 时 出 现 一 片 空白 区 域 ， 从 而 提高 用 户 体验 。 


区 实例 8-7: 为 播放 的 视频 准备 一 幅 素 材 图 片 
源码 路 径 : 光盘 :\codes\8\7.html 


在 本 实例 的 <video> 元 素 中 ， 新 增 了 一 个 poster 属性 ， 并 选取 一 幅 图 片 作为 该 属性 的 值 。 当 播放 
视频 文件 时 ， 在 视频 播放 区 域 中 会 首先 显示 poster 属性 指定 的 图 片 。 实 例文 件 7.html 的 主要 实现 代 
码 如 下 。 

«video id-"vdoMain" src="123.0gg" 

width="360px" height-"220px" 
controls-"true" poster-"123.jpg"» 
你 的 浏览 器 不 支持 视频 

</video> 

在 上 述 代码 中 ， 设 置 了 <video> 媒 体 元 素 的 
poster 属性 ， 该 属性 是 视频 元 素 <video> 所 独 有 的 
属性 。 利 用 该 属性 不 仅 可 以 在 视频 文件 开始 播放 
前 设置 图 片 ， 还 可 以 通过 视频 元 素 的 事件 机 制 ， 
指定 在 某 事件 中 改变 该 属性 的 图 片 URL。 例 如 ， 
当 用 户 单 击 “ 和 暂停 ”按钮 或 播放 完成 时 ， 在 相应 
的 事件 中 编写 JavaScript 代码 ， 通 过 setAttribute() 
方法 重 置 poster 属性 中 图 片 的 URL， 可 以 根据 不 
同事 件 动 态 变 换 图 片 的 效果 。 执 行 后 将 指定 的 图 
片 作为 待 播放 视频 的 封面 ， 如 图 8-7 所 示 。 87 执行 效果 


e. 


sss sapanen 0000 


8.3.2 ”显示 加 载 视频 的 状态 


在 HTML 5 中 ， 多 媒体 元 素 <video> 的 networkState 属性 可 以 返回 视频 文件 的 网 络 状态 。 当 浏览 器 
读 取 视 频 文件 时 会 触发 progress 事件 ， 通 过 该 事件 可 以 获取 视频 文件 在 被 打开 过 程 中 各 个 不 同 阶段 的 
网 络 状 态 值 。 其 中 networkState 为 只 读 属性 ， 该 属性 对 应 如 下 4 个 返回 值 。 

回 NETWORK EMPTY: 返回 值 为 0， 用 于 数据 加 载 初始 化 。 

回 NETWORK IDLE: 返回 值 为 1， 文 件 加 载 成 功 ， 等 待 请 求 播放 。 

回 NETWORK LOADING: 返回 值 为 2， 文 件 正在 加 载 过 程 中 。 

E| NETWORK NO SOURCE: 返回 值 为 3， 表 示 加 载 出 错 。 


实例 8-8: 显示 加 载 视频 的 状态 
源码 路 径 : 光盘 :\codes\8\8.html 


在 本 实例 的 页 面 中 , 分 别 添加 一 个 多 媒体 元 素 <video> 和 一 个 <span> 元 素 。 当 使 用 <video> 元 素 加 载 
视频 文件 时 ， 在 触发 的 progress 事件 中 ， 通 过 <span> 元 素 显示 文件 在 加 载 过 程 中 返回 的 networkState 
属性 值 。 实 例文 件 8.html 的 主要 代码 如 下 。 

«link href="css.css" rel="stylesheet" type="text/css"> 


«script type-"text/javascript" language-"jscript" 
Src-"js8.js"/ 


</script> 
</head> 
<body> 
<div> 
«video id="vdoMain" src="123.0gg" 
width="360px" height-"220px" 
onProgress="Video_Progress(this)" 
controls-"true" poster="123.jpg"> 
当前 浏览 器 不 支持 视频 ! 
</video> 
<span id="spnStatus"></span> 
<div> 
</body> 
脚本 文件 js8.js 的 主要 代码 如 下 。 


function $$(id) ( 
return document.getElementByld(id); 


} 
function Video Progress(e) ( 
var intState = e.networkState; 
S$$("spnStatus").style.display = "block"; 
S$$("spnStatus").innerHTML = StrByNum(intState) 
if (intState == 1) ( 
$$("spnStatus").style.display = "none"; 
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function StrByNum(n) ( 
Switch (n) ( 
case 0: 
return "正在 初始 化 .…"; 
case 1: 
return "数据 加 载 完成 ! 
case 2: 
return "正在 加 载 中 …"; 
case 3: 
return "数据 加 载 失败 中; 
) 
) 


纵览 上 述 代 码 ， 媒 体 元 素 <video> 在 触发 加 载 视频 文件 事件 progress 时 ， 调 用 一 个 自 定义 的 函数 
Video_Progress0， 此 函数 的 运作 流程 如 下 。 

(1) 将 <video> 元 素 的 networkState 属性 值 保存 至 变量 intState 中 。 

(2) 将 显示 状态 信息 <span> 元 素 的 可 见 样式 设置 为 block， 表 示 可 见 

G) 调用 另 一 个 自 定义 的 函数 StByNum0， 将 保存 
至 变量 intState 中 的 networkState 属性 值 转换 成 相应 的 文字 
说 明 信 息 ， 并 赋值 给 显示 状态 信息 元 素 <span>， 用 于 实现 
在 页 面 中 的 动态 显示 效果 。 

(4) 当 返 回 的 networkState 属性 值 为 1 时 ， 表 示 数 据 
加 载 完 成 ， 再 将 显示 状态 信息 <span> 元 素 的 可 见 样式 设置 
为 none， 即 隐藏 该 元 素 。 

执行 后 的 效果 如 图 8-8 所 示 。 


8.3.3 出 错时 在 播放 屏幕 中 显示 出 错 信息 


TE HTML 5 中 ， 属 性 error 是 一 个 只 读 属性 ， 在 使 用 多 媒体 元 素 加 载 或 读 取 文件 过 程 中 ， 如 果 出 现 
异常 或 错误 ， 将 触发 元 素 的 error 事件 。 在 该 事件 中 ， 可 以 通过 元 素 的 error 属性 返回 一 个 MediaError 
对 象 ， 根 据 该 对 象 的 code 返回 当前 的 错误 值 。 


图 8-8 执行 效果 


在 本 实例 的 页 面 中 , 分别 添加 了 一 个 多 媒体 元 素 <video> 和 一 个 <span> 元 素 。 当 使 用 <video> 元 素 加 
载 一 个 不 支持 的 播放 格式 文件 时 触发 error 事件 ， 通 过 <span> 元 素 显 示 加 载 出 错 后 error 属性 返回 的 错 
误 代 码 信息 。 实 例文 件 9.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
Src-"js9.js"/ 
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width-"360px" height-"220px" 
onError-' Video Error(this)" 
controls-"true" poster-"123.jpg"» 
你 的 浏览 器 不 支持 视频 
</video> 
<span id="spnStatus"></span> 
<div> 
</body> 


脚本 文件 js9.js 的 主要 代码 如 下 。 


/l/lJavaScript Document 
function $$(id) ( 
return document.getElementByld(id); 
} 
function Video_Error(e) { 
var intState = e.error.code; 
$$("spnStatus").style.display = "block"; 
$$("spnStatus").innerHTML = ErrorByNum(intState); 
} 
function ErrorByNum(n) { 
switch (n) ( 
ca: 


se 1: 

return "加 载 异 常 ， 用 户 请 求 中止 ""; 
case 2: 

return "加 载 中 止 ， 网 络 错误 ! "5 
case 3: 

return "加 载 完 成 ， 解 码 出 错 "; 
case 4: 
return "不 支持 的 播放 格式 "; 


} 

) 

在 上 述 代 码 中 , 因为 视频 元 素 <video> 不 支持 载 入 文件 
123.mm 的 播放 格式 ， 所 以 会 触发 error 事件 。 在 该 事件 中 
将 调用 函数 Video_Eror0， 此 函数 的 执行 流程 如 下 。 

(1) 通过 变量 intState 保存 MediaError 对 象 code 返 
回 的 错误 代码 值 。 
(2) 将 该 值 通过 另 一 个 函数 ErrorByNum0 返 回 对 应 
的 文字 说 明 信 息 。 
(3) 将 获取 的 说 明 信 息 显示 在 页 面 元 素 <span> 中 。 
执行 后 的 效果 如 图 8-9 所 示 。 


8.3.4 检测 浏览 器 是 否 支 持 媒体 文件 类 型 


因为 浏览 器 对 多 媒体 元 素 加 载 媒体 文件 的 类 型 支持 不 同 ， 因 此 在 使 用 多 媒体 元 素 加 载 文件 前 需要 
检测 当前 浏览 器 是 否 支 持 媒体 文件 类 型 。 检 测 的 方法 是 通过 调用 多 媒体 元 素 的 canPlayType(type) 方 法 ， 


图 8-9 执行 效果 
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其 中 参数 type 表示 需要 浏览 器 检测 的 类 型 ， 该 类 型 与 媒体 文件 的 IMIME 类 型 一 致 。 通 过 多 媒体 元 素 
的 canPlayType(type) 方 法 ， 可 以 返回 如 下 3 个 值 。 

B RFH: 表示 浏览 器 不 支持 该 类 型 的 媒体 文件 。 

E] maybe: 表示 浏览 器 可 能 支持 该 类 型 的 媒体 文件 。 

E] probably: 表示 浏览 器 支持 该 类 型 的 媒体 文件 。 


区 实例 8-10: 检测 浏览 器 是 否 支持 媒体 文件 类 型 并 显示 结果 
.源码 路 径 : 光盘 :codes\S\l0hml — — 00s 
本 实例 的 功能 是 ， 使 用 方法 canPlayType0 检 测 浏览 器 支持 媒体 文件 类 型 的 过 程 。 首 先 在 页 面 中 添 
加 了 一 个 多 媒体 元 素 <video>， 并 在 多 媒体 元 素 的 底部 创建 一 个 <span> 元 素 ， 功 能 是 检测 浏览 器 是 否 支 
持 各 种 媒体 文件 类 型 。 单 击 <span> 元 素 后 将 在 页 面 中 显示 检测 后 的 结果 。 实 例文 件 10.html 的 主要 代码 
如 下 。 


«script type-"text/javascript" language="jscript" 
src="js10.js"/> 
</script> 
</head> 
<body> 
<div> 
<video id-"vdoMain" src="123.0gg" 
width="360px" height-"220px" 
poster="123.jpg"> 
你 的 浏览 器 不 支持 视频 
</video> 
«p id="pTool"> 
«span onClick="v_chkType():"> 检 测 </span> 
«Ip» 
«span id="spnResult"></span> 
<div> 
</body> 


脚本 文件 js10.js 的 主要 代码 如 下 。 


function $$(id) { 
return document.getElementByld(id); 
} 
var i = 0,j = 0,k = 0; 
function v chkType() { 
var strHTML-""; 
var arrType = new Array('audio/mpeg;', 'audio/mov;', 
'audio/mp4;codecs-"mp4a.40.2", 'audio/ogg;codecs-"vorbis", 
"Vvideo/webm;codecs-"vp8,vorbis", 'audio/wav;codecs-" 1"); 
for (intl = 0; intl < arrType.length; intl++) ( 
switch ($$("vdoMain").canPlayType(arrType[intl])) ( 
case ^: 
i=i+1; 
break; 
case "maybe": 
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jzjent. 
break; 
case "probably": 
Kkt 
break; 
) 
} 
strHTML+=" 空 字符 : "+i+"<br>"; 
strHTML+="maybe: "+j+"<br>"; 
strHTML+="probably: "+k; 
$$("spnResult").style.display="block"; 
$$("spnResult").innerHTML=strHTML; 

) 

在 上 述 代码 中 ， 当 用 户 在 页 面 中 单 击 内 容 为 “检测 ”的 <span> 元 素 时 ， 将 调用 一 个 自 定义 函数 
V_chkTypeO。 此 函数 的 运作 流程 如 下 。 

COD 定义 一 个 数组 arrType, 用 于 保存 各 种 媒体 文件 类 
型 及 编码 格式 。 

(2) 遍历 该 数组 中 的 元 素 。 在 遍历 过 程 中 ， 调 用 多 媒 
体 元 素 的 canPlayType() 方 法 ， 对 每 种 类 型 及 编码 格式 进行 — M Bue 
检测 ， 并 将 返回 检测 结果 值 的 累加 总 量 保存 至 各 自 变量 。 

(3) 将 这 些 变量 值 数 据 通过 ID 号 为 spnResult 的 元 素 
显示 在 页 面 中 。 " 

执行 后 的 效果 如 图 8-10 Bras o 图 8-10 执行 效果 


8.3.5 显示 视频 的 播放 状态 


多 媒体 元 素 不 仅 有 相关 的 属性 、 方 法 ， 而 且 还 有 一 系列 完备 的 事件 机 制 。 在 本 章 前 面 介绍 多 媒体 
元 素 的 networkState 5j error 属性 时 ， 分 别 触发 了 progress 与 error 事件 。 除 此 之 外 ， 还 有 许多 记录 媒体 
文件 播放 过 程 的 事件 , 例如 playing 等 。 在 媒体 文件 被 浏览 请 求 加 载 、 开 始 加 载 、 开 始 播放 、 暂 停 播放 、 
播放 结束 这 一 系列 的 流程 中 所 触发 的 事件 ， 称 为 媒体 播放 事件 ， 也 是 多 媒体 元 素 的 核心 事件 。 通 过 对 
这 些 事件 的 跟踪 ， 可 以 很 方便 地 获取 媒体 文件 在 各 个 阶段 的 播放 状态 。 


实例 8-11: 显示 当前 正在 播放 视频 的 状态 
源码 路 径 光盘 :\codes\8\11.html 


在 本 实例 的 页 面 中 添加 了 一 个 多 媒体 元 素 <video>， 并 增加 了 controls 属性 ， 同 时 通过 自 定义 函数 
绑 定 了 多 个 播放 事件 。 在 事件 中 ， 分 别 记 录 媒 体 元 素 的 即时 状态 ， 并 以 动态 的 方式 ， 将 状态 内 容 显 示 
在 ID 号 为 spnPlayTip 的 页 面 元 素 中 。 实 例文 件 11.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" src-"js11.js"/7 


SS. 3 


«video id-"vdoMain" src-"123.0gg" 


E Android D RISTER HERE 


width-"360px" height-"220px" controls-"true" 
onMouseOut-"v move(0)" onMouseOver-"v move(1)" 
onPlaying-"v palying()" onPause-"v pause()" 


onLoadStart-"v loadstart();" 
onEnded-"v ended();" 
poster-"123.jpg" 
你 的 浏览 器 不 支持 视频 
</video> 
<p id="pTip"> 


«span id-"spnPlayTip" class="spnL"> 播 放 完成 </span> 


«Ip» 
<div> 
</body> 
脚本 文件 jsl1l.js 的 主要 代码 如 下 。 
//JavaScript Document 
function $$(id) ( 
return document.getElementByld(id); 


) 
function v move(v( 


S$S("pTip").style.display-(v)?"block":"none"; 


) 

function v. loadstart() ( 
$$("spnPlayTip").innerHTML=" 开 始 加 载 "; 

} 

function v_palying(X{ 
$$("spnPlayTip").innerHTML=" 正 在 播放 "; 

} 

function v_pause(X{ 
$$("spnPlayTip").innerHTML=" 已 经 暂停 "; 

} 

function v ended()( 
$$("spnPlayTip").innerHTML=" 播 放 完成 "; 

} 


通过 上 述 代 码 实现 了 鼠标 指针 移 至 多 媒体 元 素 时 显示 媒体 播放 状态 的 功能 ， 在 移出 元 素 时 隐藏 播 


放 状 态 。 实 现 方法 是 在 多 媒体 元 素 的 onMouseOnut 
onMouseOver 事件 中 ,通过 传递 不 同 的 参数 值 调用 同一 
个 自 定义 的 函数 v_ move0。 在 该 函数 中 将 根据 传 回 的 参 
数值 ， 显 示 或 隐藏 ID 号 为 pTip 的 页 面 元 素 ， 从 而 实现 
鼠标 指针 移 至 或 移出 多 媒体 元 素 的 效果 。 为 了 在 多 媒体 
元 素 触发 播放 事件 的 过 程 中 动态 显示 媒体 文件 的 播放 
状态 ， 需 要 在 绑 定 的 事件 中 ， 修 改 ID 号 为 spnPlayTip 
的 元 素 内 容 。 


执行 后 的 效果 如 图 8-11 所 示 。 


e. 


8-1 执行 效果 
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8.3.6 显示 播放 视频 的 时 间 信 息 


在 多 媒体 元 素 的 众多 事件 中 ,timeupdate 事件 是 一 个 十 分 重要 的 事件 。 在 媒体 文件 播放 过 程 中 ， 如 
果 播 放 位 置 发 生变 化 ， 就 会 触发 该 事件 。 通 过 该 事件 可 以 结合 多 媒体 元 素 的 currentTime 与 duration 属 
性 ， 动 态 显示 媒体 文件 播放 的 当前 时 间 与 总 量 时 间 。 


re 实例 8-12: 显示 播放 视频 的 时 间 信 息 
- 源码 路 径 : 光盘 :\codes\S\12 .html 


本 实例 的 功能 是 为 多 媒体 元 素 <video> 添 加 一 个 onTimeUpdate 事件 ， 用 于 改变 播放 文件 位 置 时 调 
用 。 另 外 新 增加 一 个 ID 号 为 spnTimeTip 的 <span> 元 素 ， 用 于 动态 显示 媒体 文件 播放 的 当前 时 间 与 总 
量 时 间 。 实 例文 件 12.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src="js12.js"/> 
</script> 
</head> 
<body> 
<div> 
«video id="vdoMain" src="123.0gg" 
width="360px" height="220px" controls-"true" 
onMouseOut-"v move(0)" onMouseOver-"v move(1)" 
onPlaying-"v palying()" onPause-"v pause()" 
onLoadStart-"v loadstart();" 
onEnded-'v ended();" 
onTimeUpdate-"v timeupdate(this)" 
poster-"123.jpg"» 
你 的 浏览 器 不 支持 视频 
</video> 
<p id="pTip"> 
«span id-"spnPlayTip" class="spnL"></span> 
«span id-"spnTimeTip" class-"spnR"»00:00 / 00:00«/span7 
«Ip» 
<div> 
</body> 


脚本 文件 js12.js 的 主要 实现 代码 如 下 。 


I|JavaScript Document 
function $$(id) ( 
return document.getElementByld(id); 
) 
function v move(v)( 
S$$("pTip").style.display-(v)?"block":"none"; 


} 

function v_loadstart() { 
$$("spnPlayTip").innerHTML=" 开 始 加 载 "; 

} 


ea SD mw se 


function v. palying()( 
$$("spnPlayTip").innerHTML=" 正 在 播放 "; 


} 

function v pause()( 
$$("spnPlayTip").innerHTML=" 已 经 暂停 "; 

} 


function v ended(X 
$$("spnPlayTip").innerHTML=" 播 放 完成 "; 


) 
function v timeupdate(e)( 
var strCurTime-RuleTime(Math.floor(e.currentTime/60),2)*":"- 
RuleTime(Math.floor(e.currentTime9660),2); 
var strEndTime-RuleTime(Math.floor(e.duration/60),2)":"- 
RuleTime(Math.floor(e.duration?660),2); 
$$("spnTimeTip").innerHTML-strCurTime-" / "+strEndTime; 


) 
/| 转换 时 间 显 示 格式 
function RuleTime(num, n) { 
var len = num.toString().length; 
while(len « n) ( 
num = "0" + num; 
len; 


return num; 


) 


在 上 述 代码 中 ， 当 多 媒体 元 素 触发 timeupdate 事件 时 调用 自 定 义 函 数 v_timeupdate0， 通 过 该 函数 
分 别 使 用 整除 与 求 余数 的 方法 ， 分 割 多 媒体 元 素 当 前 时 间 CeurrentTime) 属性 与 时 间 总 量 Cduration) 
属性 返回 的 秒 值 ， 最 终 组 成 一 个 分 与 秒 的 格式 。 在 组 成 过 程 中 ， 又 调用 了 另外 一 个 自 定义 函数 
RuleTime()， 该 函数 可 以 将 长 度 不 足 2 位 的 数字 ， 在 前 面 加 0 进行 补充 。 

执行 后 的 效果 如 图 8-12 所 示 。 


8-12 ”执行 效果 
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第 9 章 级 图 实战 


在 全 新 的 HTML 5 中 ,可 以 在 网 页 中 直接 绘制 图 形 图 像 ， 其 功能 甚至 和 专业 的 绘图 软件 一 样 强大 。 


在 本 章 将 详细 介绍 在 网 页 中 使 


日 HTML 5 技术 绘制 图 形 图 像 的 方法 ， 并 通过 几 个 具体 实例 来 演示 绘图 


流程 ， 为 读者 步 入 本 书后 面 知 识 的 学 习 打 下 基础 。 


9.1 使 用 <canvas> 标 记 


£a 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 9 章 \ 使 用 <canvas> 标 记 .avi 

<canvas> 标 记 是 HTML 5 中 新 增 的 一 个 HTML 元 素 ， 可 以 在 JavaScript 的 帮助 下 绘制 图 形 图 像 ， 
例如 可 以 画图 、 合 成 图 像 或 实现 动画 效果 。 标 记 <canvas> 具 有 画布 功能 ， 众 所 周知 ， 画 布 是 一 个 矩形 
区 域 ， 在 上 面 可 以 控制 其 每 一 个 像素 。HTML 5 中 的 <canvas> 拥 有 多 种 绘制 图 形 的 方法 ， 如 绘制 矩形 、 


圆 形 、 字 符 以 及 添加 图 像 等 。 


在 向 HTML 5 页 面 中 添加 <canvas> 元 素 时 ， 需 要 设置 元 素 的 id、 宽度 和 高 度 ， 例 如 下 面 的 代码 。 
«canvas id="myCanvas" width="100" height= "100"></canvas> 


标记 <canvas> 本 身 并 没有 绘图 能 力 ， 还 需要 在 JavaScript 的 帮助 下 才能 完成 绘制 工作 。 例 如 下 面 的 


代码 。 


«script type="text/javascript"> 


var c-document.getElementByld("myCanvas"); 


var cxt-c.getContext("2d"); 
cxt.fillStyle="#FF0000"; 
cxt.fillRect(0,0,150,75); 
</script> 


使 用 JavaScript 实现 绘图 的 基本 流程 如 下 。 
(1) JavaScript 使 用 id 来 寻找 <canvas> 元 素 ， 例 如 下 面 的 代码 。 


var c-document.getElementByld("myCanvas"); 
(2) 创建 context 对 象 ， 例 如 下 面 的 代码 。 


var cxt-c.getContext("2d"); 


X15 getContext("2d") JE i £l] HTML 5 对 象 ， 它 拥有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 字 符 以 及 添加 
图 像 的 方法 。 例 如 ， 通 过 下 面 的 代码 可 以 绘制 一 个 红色 的 矩形 。 


cxt fillStyle-"*FF0000"; 
cxt fillRect(0,0,150,75); 
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在 上 述 代 码 中 ， 方 法 flStyle0 的 功能 是 将 矩形 填充 为 红色 ， 方 法 flRectO 的 功能 是 设置 矩形 的 形 
状 、 位 置 和 尺寸 ， 这 里 其 坐标 参数 为 (0,0,150,75)， 意 思 是 在 画布 上 绘制 一 个 150x75 的 矩形 ， 并 且 是 从 
左上 角 (0,0) 开 始 绘制 的 。 


92 HTML DOM Canvas 对 象 


GA 知识 点 讲解 : 光盘 \ 视 频 讲解 第 9 HTML DOM Canvas 对 象 .avi 

Canvas 对 象 表示 一 个 HTML 画布 元 素 <canvas>， 此 对 象 没 有 自己 的 行为 ， 但 是 定义 了 一 个 API 支 
持 脚 本 化 客户 端 绘图 操作 。 用户 可 以 直接 在 Canvas 对 象 上 指定 宽度 和 高 度 ， 但 是 其 大 多 数 功 能 都 可 以 
通过 CanvasRenderingContext2D 对 象 来 获得 。 这 是 通过 Canvas 对 象 的 getContext0 方 法 实现 的 , 在 具体 
实现 时 ， 是 通过 将 直接 量 字符 串 2d 作为 唯一 的 参数 传递 的 方式 而 获得 的 。 


1. Canvas 对 象 的 属性 


Canvas 对 象 有 如 下 两 个 重要 的 属性 。 

(1) height 属性 

height 属性 表示 画布 的 高 度 。 和 一 幅 图 像 一 样 , 此 属性 可 以 指定 为 一 个 整数 像素 值 或 者 是 窗口 高 度 
的 百分比 。 当 改变 该 值 时 ， 在 该 画布 上 已 经 完成 的 任何 绘图 都 将 被 擦 除 。 默 认 值 是 300。 

(2) width 属性 

width 属性 表示 画布 的 宽度 。 和 一 幅 图 像 一 样 ， 此 属性 可 以 指定 为 一 个 整数 像素 值 或 者 是 窗口 宽度 
的 百分比 。 当 改变 该 值 时 ， 在 该 画布 上 已经 完成 的 所 有 绘图 将 被 擦 除 。 默 认 值 是 300。 


2. Canvas 对 象 的 方法 


Canvas 对 象 只 有 一 个 方法 : getContext0)， 此 方法 用 于 返回 一 个 用 于 在 画布 上 绘图 的 环境 。 使 用 方 
法 getContext0 的 语法 格式 如 下 。 


Canvas.getContext(contextID) 


参数 contextID 指定 了 想 要 在 画布 上 绘制 的 图 形 类 型 。 当 前 唯一 的 合法 值 是 2d, 它 指定 将 要 绘制 一 
个 二 维 图 形 , 并 且 返 回 了 一 个 环境 对 象 , 该 对 象 导出 一 个 二 维 绘图 API。 很 可 能 在 不 久 的 将 来 , <canvas> 
标签 会 扩展 到 支持 3D 绘图 ， 此 时 用 getContext0 方 法 就 可 以 允许 传递 一 个 3d 字符 串 参 数 。 

方法 getContext0) 的 返回 值 是 一 个 CanvasRenderingContext2D 对 象 ， 使 用 该 对 象 可 以 绘制 到 
<canvas> 元 素 中 。 由 此 可 见 ， 方 法 getContextO 的 功能 是 返回 一 个 表示 用 来 绘制 的 环境 类 型 的 环境 ， 其 
本 意 是 要 为 不 同 的 绘制 类 型 (二 维 、 三 维 ) 提供 不 同 的 环境 。 当 前 唯一 支持 的 是 二 维 ， 它 会 返回 一 个 
CanvasRenderingContext2D 对 象 ， 该 对 象 实现 了 一 个 画布 所 使 用 的 大 多 数 方法 。 


区 实例 9-1: 显示 矩形 中 鼠标 指针 的 坐标 
源码 路 径 : 光盘 :\codes\9\1 html 


本 实例 的 功能 是 在 网 页 中 绘制 一 个 矩形 ， 当 将 鼠标 指针 放 在 矩形 内 的 某 一 个 位 置 时 ， 会 提示 指针 
的 坐标 。 实 例文 件 1.html 的 主要 代码 如 下 。 
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<script type="text/javascript"> 

function cnvs_getCoordinates(e) 

{ 

x=e.clientX; 

y=e.clientY; 

document.getElementByld("xycoordinates").innerHTML -"Coordinates: (" + x + "" + y + ")"; 
} 


function cnvs_clearCoordinates() 


{ 
document.getElementByld("xycoordinates").innerHTML-""; 


) 
</script> 
</head> 


<body style="margin:0px;"> 
<p> 把 鼠标 悬 停 在 下 面 的 矩形 上 看 看 : </p> 


<div id="coordiv" style="float:leftwidth:199px;height:99px;border:1px solid $c3c3c3" onmousemove-"cnvs . 

getCoordinates(event)" onmouseout-"cnvs clearCoordinates()"» «/div» 

«br /> 

«br /> 

«br /> 

«div id-"xycoordinates"» «/div» 

</body> 

执行 后 的 效果 如 图 9-1 所 示 。 
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Coordinates: (97,70) 


9.3 HTML 5 绘图 实践 


GR 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 9 章 \HTML 5 绘图 实践 .avi 
前 面 已 经 讲解 了 使 用 HTML 5 技术 绘制 图 形 图 像 的 基本 知识 ， 本 节 将 通过 具体 实例 的 实现 过 程 来 
提高 读者 的 开发 水 平 。 


/ Android 移动 网 站 开发 详 角 


9.3.1 在 指定 位 置 绘制 指定 角度 的 相交 线 


| 实例 9-2: 在 网 页 中 的 指定 坐标 位 置 绘制 指定 角度 的 相交 线 
OR 


本 实例 的 功能 是 ， 在 指定 的 坐标 位 置 绘制 指定 角度 的 相交 线 。 实 例文 件 2html 的 主要 代码 如 下 。 
«script type-"text/javascript"^ 


var c-document.getElementByld("myCanvas"); 
var cxt-c.getContext("2d"); 

cxt.moveTo(10, 10); 

cxt.lineTo(150,50); 

cxt.lineTo(10,50); 

cxt.stroke(); 

</script> 

</body> 


执行 后 的 效果 如 图 9-2 所 示 。 
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9.3.2 绘制 一 个 圆 


实例 9-3: 在 网 页 中 绘制 一 个 贺 
.源码 路 径 ; 光盘 :codes\9\3.html — ——— 000000000000 sl 
本 实例 的 功能 是 ， 在 网 页 中 绘制 一 个 填充 为 红色 的 圆 。 
实例 文件 3.html 的 主要 代码 如 下 。 


<script type="text/javascript"> 

var c=document.getElementByld("myCanvas"); 
var cxt-c.getContext("2d"); 
cxt.fillStyle="#FF0000"; 

cxt.beginPath(); 
cxt.arc(70,18,15,0,Math.PI*2,true); 
cxt.closePath(); 

cxt fill(); 


</script> 
«Ibody» 


执行 后 的 效果 如 图 9-3 所 示 。 
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9-3 ”执行 效果 


9.3.3 ”在 画布 中 显示 一 幅 指定 的 图 片 


re 实例 9-4: 在 Canvas 画布 中 显示 一 幅 指 定 的 图 片 
源码 路 径 : 光盘 :\codes\94.html 


本 实例 的 功能 是 ， 在 Canvas 画布 中 显示 一 幅 指 定 的 图 片 。 实 例文 件 4html 的 主要 代码 如 下 。 


<script type="text/javascript"> 

var c=document.getElementByld("myCanvas"); 
var cxt-c.getContext("2d"); 

var img-new Image() 

img.src-"http imgload.jpg" 
cxt.drawlmage(img,0,0); 

</script> 

</body> 


执行 后 的 效果 如 图 9-4 所 示 。 


图 9-4 执行 效果 
9.3.4 绘制 一 个 指定 大 小 的 正方 形 


与 创建 页 面 中 的 其 他 元 素 相同 ， 创 建 <canvas> 元 素 的 方法 也 十 分 简单 ， 只 需要 加 一 个 标记 ID 号 ， 
并 设置 元 素 的 长 和 宽 即 可 ， 具 体格 式 如 下 。 


«canvas id-"cnvMain" width="2 80px" height= "190px" ></canvas> 


创建 画布 后 ， 即 可 利用 画布 的 上 下 文 环境 对 象 绘制 图 形 。 


LO Android D RISTER HERE 


C 实例 9-5: 绘制 一 个 指定 大 小 的 正方 形 
~ 源码 路 径 : JC codes 9 5.html 


本 实例 的 功能 是 在 页 面 中 新 建 一 个 <canvas> 元 素 ， 并 在 该 元 素 中 绘制 一 个 指定 大 小 的 正方 形 。 实 
例文 件 5.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src-"js5.js"/» 
</script> 
</head> 
«body onLoad="pageload();"> 
«canvas id-"cnvMain" width="280px" height="190px"></canvas> 
</body> 


脚本 文件 js5.jjs 的 主要 代码 如 下 。 


I|JavaScript Document 
function $$(id) ( 
return document.getElementByld(id); 
} 
function pageload()( 
var cnv-$$("cnvMain"); 
var cxtcnv.getContext("2d"); 
cxt.fillStyle="#ccc"; 
cxt.fillRect(30,30,80,80); 
) 


上 述 代码 首先 获取 了 <canvas> 元 素 ， 然 后 取得 绘图 元 素 的 上 下 文 环境 对 象 cxt。 在 获取 过 程 中 ， 需 
要 调用 画布 的 getContext0 方 法 ， 并 向 该 方法 传递 一 个 字符 串 为 2d 的 参数 。 一 旦 取得 画布 的 上 下 文 环 
境 对 象 ， 就 可 以 通过 该 对 象 来 使 用 绘图 的 方法 与 属性 。 例 如 ， 下 面 是 绘制 一 个 矩形 的 方法 。 
cxt.fillRect(x,y,width, height); 
其 中 ， 参 数 x 表示 矩形 起 点 x 轴 与 左上 角 (0.0) 的 距离 ， 参 数 y 表示 和 矩形 起 点 y 轴 与 左上 角 (0.0) 的 
距离 ， 参 数 width RREH, B height 表示 矩形 的 高 度 ， 其 所 在 位 置 如 图 9-5 所 示 。 


图 9-5 执行 效果 
在 绘制 矩形 之 前 ， 需 要 设置 图 形 的 背景 色 ， 方 法 如 下 。 
cxt.fillStyle-"background-color"; 
其 中 ， 参 数 background-color 可 以 是 一 种 CSS 颜色 、 图 案 、 渐 变色 ， 默 认 值 为 黑色 。 本 实例 为 #ccc， 
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第 9 章 
是 一 种 CSS 颜色 。 注意 , 设置 绘制 图 形 背景 色 的 操作 必须 先 于 图 形 绘制 , 否则 设置 的 背景 色 将 不 起 作用 。 
9.3.5 ”绘制 一 个 带 边框 的 矩形 


利用 画布 除了 可 以 绘制 有 背景 色 的 图 形 外 ， 还 可 以 绘制 有 边框 的 图 形 。 具 体 过 程 是 在 获取 绘图 上 
下 文 环境 对 象 ext 后 ， 调 用 一 个 strokeRect(0 方 法 。 该 方法 用 来 绘制 一 个 矩形 ， 但 并 不 填充 矩形 区 域 ， 
只 是 绘制 矩形 的 边框 ， 其 调用 格式 如 下 。 


cxt.strokeRect(x,y,width, height); 


其 中 ， 参 数 x，y 为 矩形 起 点 坐标 ，width 与 height 分 别 为 矩形 的 宽度 与 高 度 。 
在 绘制 边框 前 ， 可 以 调用 strokeStyle 属性 设置 边框 的 颜色 ， 具 体格 式 如 下 。 


cxt. strokeStyle-"background-color"; 


其 中 ， 参 数 background-color 表示 边框 的 颜色 ， 可 以 是 一 种 CSS 值 、 图 案 或 渐变 色 。 
如 果 想 要 清空 图 形 中 指定 区 域 的 像素 ， 可 以 调用 另 一 个 方法 clearRectO0， 调 用 格式 如 下 。 


cxt. clearRect(x,y, width, height); 


其 中 ， 参 数 x，y 为 被 清空 色彩 区 域 起 点 的 坐标 ，width 与 height 分 别 为 被 清空 像素 区 域 的 宽度 与 
高 度 。 清 空 后 的 区 域 将 变 为 透明 色 。 


K 实例 9-6: 在 网 页 中 绘制 一 个 带 边框 的 矩形 
源码 路 径 : 光盘 :\codes\9\6 .html 


在 本 实例 中 新 建 了 一 个 <canvas> 元 素 ， 并 在 该 元 素 中 绘制 一 个 有 背景 色 和 边框 的 矩形 。 单 击 该 矩 
形 时 ， 会 清空 矩形 中 指定 区 域 的 图 形 色彩 。 实 例文 件 9html 的 主要 代码 如 下 。 
«script type-"text/javascript" language-"jscript" 
src="js6.js"/> 

</script> 
</head> 
<body onLoad="pageload();"> 

«canvas id-"cnvMain" width="280px" height-"190px" 

onClick-"cnvClick();"» 
</canvas> 


</body> 


编写 脚本 文件 js6.js， 当 开始 加 载 页 面 时 会 调用 一 个 自 定义 函数 pageload0， 此 函数 使 用 fillRectO 
方法 绘制 带 背 景色 的 图 形 ， 此 外 还 调用 了 strokeRect0 方 法 绘制 带 边框 的 图 形 。 在 调用 方法 strokeRect() 
前 ， 先 通过 strokeStyle 属性 设置 所 绘制 边框 的 颜色 为 #666。 由 于 filRect(0 与 strokeRect0 方 法 中 所 使 用 
的 参数 值 相同 ， 因 此 将 绘制 一 个 背景 色 和 边框 重 又 的 矩形 。 当 用 户 单 击 绘制 好 的 矩形 时 ， 将 触发 一 个 
onClick 事件 ， 该 事件 调用 自 定义 函数 cnvClick0。 在 该 函数 中 ， 使 用 clearRect0 方 法 清空 指定 区 域 的 色 
彩 。 文 件 js6js 的 主要 代码 如 下 。 


function $$(id) { 
return document.getElementByld(id); 
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} 

function pageload()( 
var cnv-$$("cnvMain"); 
var cxt-cnv.getContext("2d"); 
/设置 边框 
Cxt.strokeStyle="#666"; 
Cxt.strokeRect(30,30,150,80); 
Ing gsm 
cxt.fillStyle-" eee": 
cxt.fillRect(30,30,150,80); 


} 
function cnvClick()( 
var cnv-$$("cnvMain"); 


var cxt-cnv.getContext("2d"); 
/清空 图 形 
cxt.clearRect(36,36,138,68); 
} 
执行 后 的 效果 如 图 9-6 所 示 。 
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图 9-6 执行 效果 
9.3.6 绘制 一 个 渐变 图 形 


在 HIML 5 中 ， 利 用 <canvas> 元 素 可 以 绘制 出 有 渐变 色 的 图 形 。 渐 变 方 式 分 为 两 种 ， 一 种 是 线性 
渐变 ， 另 一 种 是 径 向 渐变 。 使 用 线性 渐变 方式 绘制 图 形 的 步骤 如 下 。 

(1) 在 获取 上 下 文 环境 对 象 cxt 后 , 调用 该 对 象 的 createLinearGradient0 方 法 , 创建 一 个 LinearGradient 
对 象 。 调 用 格式 如 下 。 


cxt.createLinearGradient(xStart, yStart, xEnd, yEnd) 


其 中 ， 参 数 xStart、yStart 表示 渐变 色 开始 时 的 坐标 ; xEnd. yEnd 表示 渐变 色 结 束 时 的 坐标 。 如 果 
yStart 与 yEnd 相同 , 表示 渐变 色 沿 水 平方 向 从 左 向 右 渐变 ; 如 果 xStart 与 xEnd 相同 ， 表 示 渐 变色 沿 纵 
坐标 方向 上 下 渐变 ， 如果 xStart 与 xEnd 不 相同 ， 并 且 yStart 与 yEnd 也 不 相同 ， 则 表示 渐变 色 沿 矩形 
对 角 线 方向 渐变 。 

(2) 创建 LinearGradient 对 象 并 将 其 取 名 为 gnt 后 ， 调 用 该 对 象 的 addColorStop0 方 法 ， 进 行 渐变 
颜色 与 偏 移 量 的 设置 ， 调 用 格式 如 下 。 


gnt. addColorStop(value, color); 
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其 中 ,参数 value 表示 渐变 位 置 偏 移 量 , 可 以 取 0 一 1 之 间 的 任意 值 ; 参数 color 表示 渐变 开始 与 结 
束 时 的 颜色 ， 分 别 对 应 偏 移 量 0 与 1。 为 了 实现 颜色 的 渐变 功能 ， 必 须 调用 两 次 该 方法 ,第 一 次 表示 开 
始 渐变 时 的 颜色 ， 第 二 次 表示 结束 渐变 时 的 颜色 。 

G) 通过 gnt 对 象 将 偏 移 量 与 渐变 色 的 值 设置 完成 后 ， 再 将 gnt 对 象 赋值 给 fillStyle 属性 ， 表 明 
此 次 图 形 的 样式 是 一 个 渐变 对 象 ， 最 后 使 用 fill]Rect(0) 方 法 绘制 出 一 个 有 渐变 色 的 图 形 。 

区 "NN 实例 97: 在 网 页 中 绘制 一 个 渐变 图 形 0000 — 

源码 路 径 : 光盘 :codes97hm O ———————0 sss 

本 实例 新 建 了 一 个 <canvas> 元 素 ， 并 利用 该 元 素 以 3 种 不 同 颜色 渐变 方向 绘制 图 形 ， 分 别 为 自 左 
向 右 、 从 上 而 下 、 沿 图 形 对 角 线 方向 渐变 。 实 例文 件 7.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src="js7.js"/> 
</script> 
</head> 
«body onLoad-"pageload();"» 
«canvas id-"cnvMain" width-"280px" height-"190px"» «/canvas» 
</body> 


脚本 文件 js7jjs 的 主要 代码 如 下 。 


IIJavaScript Document 
function $$(id) ( 
return document.getElementByld(id); 
) 
function pageload()( 
var cnv-$$("cnvMain"); 
var cxt-cnv.getContext("2d"); 
/绘制 由 左 至 右 的 颜色 渐变 图 形 
var gnt1=cxt.createLinearGradient(20,20,150,20); 
gnt1.addColorStop(0,"#000"); 
gnt1.addColorStop(1,"#fff"); 
cxt.fillStyle=gnt1; 
cxt.fillRect(20,20,150,20); 
/绘制 由 上 至 下 的 颜色 渐变 图 形 
var gnt2-cxt.createLinearGradient(20,20,20, 150); 
gnt2.addColorStop(0," 7:000"); 
gnt2.addColorStop(1," fff"); 
cxt.fillStyle=gnt2; 
cxt.fillRect(20,20,20,150); 
/绘制 对 角 线 方向 的 颜色 渐变 图 形 
var gnt3-cxt.createL inearGradient(50,50, 100,100); 
gnt3.addColorStop(0,"4£000"); 
gnt3.addColorStop( 1," zfff"); 
cxt.fillStyle-gnt3; 
cxt.fillRect(50,50, 100,100); 
) 


执行 后 的 效果 如 图 9-7 所 示 。 
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图 9-7 执行 效果 
9.3.7 ”绘制 不 同 的 圆 形 


TE HTML 5 网 页 中 ， 可 以 使 用 上 下 文 环境 对 象 中 的 arc0 方 法 来 描绘 圆 形 路 径 和 各 种 形状 的 圆 形 图 
案 。 调 用 该 方法 的 格式 如 下 。 
cxt.arc(x,y,radius, startAngle, endAngle, anticlockwise) 


参数 说 明 如 下 。 
cxt: 表示 上 下 文 环境 对 象 的 名 称 。 
x: 表示 绘制 圆 形 的 横 坐 标 。 
y: 表示 绘制 圆 形 的 纵 坐 标 。 
radius: 表示 绘制 圆 的 半径 ， 单 位 为 像素 。 
startAngle: 表示 绘制 圆 弧 时 的 开始 角度 。 
endAngle: 表示 绘制 圆 弧 时 的 结束 角度 。 
anticlockwise: 是 一 个 布尔 值 ， 表 示 画 圆 的 方向 ，true 为 逆 时 针 ，false 为 顺 时 针 。 
在 调用 方法 arc0 绘 制 圆 形 路 径 之 前 ， 需 要 调用 上 下 文 环境 对 象 中 的 beginPath() 方 法 ， 声 明 开 始 绘 
制 路 径 ， 其 调用 格式 如 下 。 


cxt.beginPath() 

其 中 ，cxt 表示 上 下 文 环境 对 象 的 名 称 ， 该 方法 无 参数 。 需 要 注意 的 是 ， 在 使 用 遍历 或 循环 绘制 路 
径 时 ， 每 次 都 要 调用 该 方法 ， 即 该 方法 仅 对 应 单 次 的 路 径 绘 制 。 绘 制 圆 形 路 径 完成 后 ， 还 要 调用 
closePath(0) 方 法 ， 将 所 绘制 完成 的 路 径 进行 关闭 ， 其 调用 格式 如 下 。 

cxt.closePath() 

其 中 , cxt 为 上 下 文 环境 对 象 名 称 。 该 方法 的 参数 与 beginPath0 方 法 一 样 , 也 是 对 应 单 次 的 路 径 绘 制 。 
在 一 般 情况 下 ， 该 方法 与 beginPath0 方 法 是 成 对 出 现 的 。 绘 制 完 圆 形 路 径 后 ， 并 没有 真正 在 画布 元 素 中 
展示 ， 因 为 上 面 的 操作 仅 绘 制 了 圆 形 的 路 径 ， 还 需要 对 路 径 进行 描 边 或 填充 。 如 果 是 描 边 ， 则 调用 上 下 
文 环境 对 象 中 的 stroke0 方 法 。 在 调用 该 方法 之 前 ， 还 可 以 设置 边框 的 颜色 与 宽度 ， 如 下 面 代码 所 示 。 

cxt.strokeStyle="#ccc"; 

cxtlineWidth=2: 

cxt.stroke(); 


上 述 代码 的 第 1 行 表示 设置 边框 的 颜色 ， 第 2 行 表示 设置 边框 的 宽度 ， 第 3 行 表 示 开 始 进行 描 边 
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操作 。 需 要 注意 的 是 ， 设 置 边框 颜色 与 宽度 的 代码 必须 在 描 边 操作 前 ， 否 则 将 不 起 作用 。 

除了 可 对 已 经 绘制 的 圆 形 路 径 进 行 描 边 外 ， 还 可 以 调用 上 下 文 环境 对 象 中 的 fil10 方 法 对 其 进行 填 
充 操作 。 当 然 在 调用 该 方法 之 前 需要 先 设置 填充 的 颜色 ， 如 下 面 代码 所 示 。 

cxt. fillStyle- "eee": 

cxt. fill(); 


上 述 代码 的 第 1 行 表示 设置 填充 圆 形 路 径 的 颜色 ， 第 2 行 表示 开始 进行 填充 。 与 描 边 操作 一 样 ， 
设置 填充 圆 形 路 径 的 颜色 的 代码 必须 在 填充 操作 之 前 ， 否 则 也 将 不 起 作用 。 当 然 ， 也 可 以 对 所 绘制 的 
圆 形 路 径 既 进行 填充 又 进行 描 边 。 

€ SM E 实例 9.8: 在 网 页 中 绘制 不 同 的 贺 形 00 - 

源码 路 径 : 光盘 :\codes\9\8.html 


在 本 实例 中 新 建 一 个 <canvas> 元 素 ， 同 时 创建 3 个 <span> 标 记 ， 内 容 分 别 设置 为 “实体 圆 ”、“ 边 
框 圆 ”和 “衔接 圆 ”。 当 单 击 某 个 <span> 标 记 时 ， 在 画布 元 素 中 绘制 对 应 图 案 的 圆 形 。 实 例文 件 8.html 
的 主要 代码 如 下 。 

«script type-"text/javascript" language-"jscript" 

Src-"js8.js"/ 

</script> 

</head> 

<body> 

<div><p> 

«span onClick="spn1_click();"> 实 体 圆 </span> 

«span onClick="spn2_click();"> 边 框 圆 </span> 

«span onClick="spn3_click();"> 衔 接 圆 </span></p> 

«canvas id-"cnvMain" width="280px" height="190px"></canvas> 
<div> 

</body> 

编写 脚本 文件 js8js， 设 置 当 单 击 “ 实 体 圆 ”标记 时 会 调用 自 定义 函数 spnl_clickO0。 此 函数 的 运作 
流程 如 下 。 

CD 通过 获取 的 上 下 文 环境 对 象 ext 来 调用 clearRect(0 方 法 ， 清 空 画布 中 原 有 的 图 形 ， 防 止 图 形 
在 画布 中 的 交叉 展示 , 然后 调用 arc0 方 法 绘制 一 个 圆 形 路 径 , 其 圆心 坐标 为 (100,100), 半径 为 50 像素 ， 
弧度 为 从 0 开始 到 Math.PI*2 结束 ， 按 顺 时 针 方 向 进行 绘制 。 

(2) 绘制 路 径 完成 后 ， 开 始 设置 填充 颜色 。 

G) 使 用 fill0 方 法 将 颜色 填充 至 已 绘制 的 圆 形 路 径 中 ， 从 而 在 画布 中 形成 一 个 实体 的 圆 形 。 

在 自 定义 函数 spn2_click0 中 ， 绘 制 圆 形 路 径 的 过 程 与 spnl_clickO 函 数 相 同 ， 只 在 最 后 绘制 图 形 时 
使 用 了 stroke() 方 法 对 路 径 进行 描 边 , 而 非 用 fil10 方 法 填充 .在 进行 描 边 前 ,通过 lineWidth 与 strokeStyle 
属性 分 别 设 置 边框 的 宽度 与 颜色 ， 然 后 使 用 stroke0 方 法 ， 按 照 设置 的 颜色 与 宽度 对 已 绘制 的 圆 路 径 进 
行 描 边 ， 从 而 在 画布 中 形成 一 个 边框 圆 。 在 自 定义 函数 spn3_click0 中 ， 结 合 了 函数 spnl_click0 与 
spn2_clickO 中 绘制 圆 形 的 方法 与 过 程 ， 只 是 在 绘制 第 二 个 贺 形 时 改变 了 圆心 的 横 坐 标 距离 ， 而 其 他 参 
数值 均 不 变 。 

文件 js8.jjs 的 主要 代码 如 下 。 
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function $$(id) ( 


} 


return document.getElementByld(id); 


function spn1 click(( 


) 


var cnv-$$("cnvMain"); 

var cxt-cnv.getContext("2d"); 
/清除 画布 原 有 图 形 
cxt.clearRect(0,0,280, 190); 
/开始 画 实体 圆 
cxt.beginPath(); 
cxt.arc(100,100,50,0,Math.PI*2.true); 
cxt.closePath(); 

/设置 填充 背景 色 
cxt.fillStyle-" eee": 

// 进 行 填充 

cxt.fill(); 


function spn2 click()( 


) 


var cnv-$$("cnvMain"); 

var cxt-cnv.getContext("2d"); 
/清除 画布 原 有 图 形 
cxt.clearRect(0,0,280,190); 

// 开 始 画 边框 贺 
cxt.beginPath(); 
cxt.arc(100,100,50,0,Math.PI*2,true); 
cxt.closePath(); 

Ing hie 

cxt.strokeStyle- "£666"; 

Ig RD AERE RE 
cxt.lineWidthz2; 

// 进 行 描 边 

cxt.stroke(); 


function spn3 click()( 


var cnv-$$("cnvMain"); 

var cxt-cnv.getContext("2d"); 
/清除 画布 原 有 图 形 
cxt.clearRect(0,0,280, 190); 
/开始 画 

cxt.beginPath(); 
cxt.arc(100,100,50,0,Math.PI*2,true); 
cxt.closePath(); 

// 设 置 填充 背景 色 
cxt.fillStyle="#eee"; 

// 进 行 填充 

cxt.fill(); 

/设置 边框 色 
cxt.strokeStyle-" 666"; 

// 设 置 边框 宽度 
cxt.lineWidth=2 
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/进行 描 边 
cxt.stroke(); 
// 开 始 画 衔接 的 边框 贺 
cxt.beginPath(); 
cxt.arc(175,100,50,0,Math.PI*2.true); 
cxt.closePath(); 
// 设 置 边 框 色 
Cxt.strokeStyle="#666"; 
// 设 置 边 框 宽度 
cxt.lineWidth-2 
/进行 描 边 
cxt.stroke(); 

) 


执行 后 的 效果 如 图 9-8 所 示 。 
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图 9-8 执行 效果 
9.3.8 绘制 一 个 渐变 圆 形 


使 用 径 向 渐变 的 方式 可 以 绘制 一 个 有 渐变 色 的 圆 形 ， 只 要 调用 上 下 文 环 境 对 象 cxt 中 的 
createRadialGradient() 方 法 即 可 。 具 体格 式 如 下 。 
cxt.createRadialGradient(xStart ,yStart, radiusStart, xEnd,yEnd, radiusEnd) 


参数 说 明 如 下 。 

ext: 表示 获取 的 上 下 文 对 象 名 称 。 
xStart: 表示 开始 渐变 圆心 的 横 坐 标 。 
yStart: 表示 开始 渐变 圆心 的 纵 坐 标 。 
radiusStart: 表示 开始 渐变 圆 的 半径 。 
xEnd: 表示 结束 渐变 圆心 的 横 坐 标 。 
yEnd: 表示 结束 渐变 圆心 的 纵 坐标 。 
radiusEnd: 表示 结束 渐变 圆 的 半径 。 

在 调用 createRadialGradient0 方 法 时 ， 从 开始 渐变 圆心 的 坐标 位 置 向 结束 渐变 圆心 的 坐标 位 置 进行 
颜色 渐变 ， 即 两 个 圆 之 间 通过 各 自 的 圆心 坐标 连接 成 一 条 直线 ， 起 点 为 开始 圆心 ， 终 点 为 结束 圆心 ， 
色彩 由 起 点 向 终点 进行 扩散 ， 直 至 终点 圆 外 框 。 使 用 方法 createRadiaIGradientO 仅 新 建 了 一 个 径 向 渐变 
的 对 象 , 接 下 来 需要 通过 方法 addColorStop0 为 该 对 象 添 加 偏 移 量 与 渐变 色 , 并 将 该 对 象 设置 为 fillStyle 
属性 的 值 。 最 后 ， 调 用 方法 fl10 在 画布 中 绘制 出 一 个 有 径 向 渐变 色彩 的 圆 形 。 
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实例 9-9: 在 网 页 中 绘制 一 个 渐变 圆 形 
源码 路 径 : 光盘 :\codes\9\9.html 


在 本 实例 的 页 面 中 新 建 了 一 个 <canvas> 元 素 ， 当 加 载 页 面 时 通过 调用 方法 createRadialGradientO 创 


建 一 个 渐变 对 象 , 将 该 对 象 设置 为 fllstyle 属性 的 值 , 在 画布 中 绘制 一 个 径 向 渐变 的 


的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src="js9.js"/> 


</script> 
</head> 


<body onLoad="pageload();"> 


«canvas id-"cnvMain" width="280px" height="190px"></canvas> 


</body> 


圆 .实例 文件 9.html 


编写 脚本 文件 js9.js， 设 置 当 获 取 上 下 文 环境 对 象 cxt 后 ， 首 先 调 用 该 对 象 的 createRadialGradient() 
方法 创建 一 个 渐变 对 象 gnt。 然 后 通过 gnt 对 象 的 addColorStop0 方 法 ， 为 渐变 对 象 增 加 3 种 用 于 渐变 
的 偏 移 量 与 颜色 值 ， 当 绘制 完 圆 路 径 后 ， 将 渐变 对 象 gnt 赋值 给 flStyle 属性 。 最 后 根据 fillstyle 属性 
值 ， 使 用 方法 fl0 在 画布 中 绘制 一 个 有 径 向 渐变 的 圆 形 图 案 。 为 了 增加 实体 圆 的 边框 效果 ， 以 相同 的 
参数 再 次 调用 arc0， 在 实体 圆 的 基础 上 绘制 一 个 边框 圆 形 。 文 件 js9.js 的 主要 代码 如 下 。 


function $$(id) ( 


return document.getElementByld(id); 


) 

function pageload()( 
var cnv-$$("cnvMain"); 
var cxt-cnv.getContext("2d"); 
/开始 创建 渐变 对 象 


var gnt-cxt.createRadialGradient(30,30,0,20,20,400); 


gnt.addColorStop(0," 42000"); 
gnt.addColorStop(0.3," eee"); 
gnt.addColorStop(1," fff"); 
/开始 绘制 实体 圆 路 径 
cxt.beginPath(); 
cxt.arc(125,95,80,0,Math.Pl*2,true); 
cxt.closePath(); 

/设置 填充 背景 色 

cxt.fillStyle-gnt; 


/进行 填充 
cxt fill(y; 


/开始 绘制 边框 圆 路 径 
cxt.beginPath(); 
cxt.arc(125,95,80,0,Math.PI*2.true); 
cxt.closePath(); 

// 设 置 边 框 颜色 

cxt.strokeStyle-" 44666"; 

// 设 置 边框 宽度 

cxt.lineWidth-2; 


/开始 描 边 
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cxt.stroke(); 
) 


执行 后 的 效果 如 图 9-9 所 示 。 


9.3.9 移动 、 缩 放 和 旋转 网 页 中 的 正方 形 


在 使 用 画布 元 素 <canvas> 绘 制图 形 时 ， 有 时 需要 对 已 绘制 完成 的 图 形 进行 相关 的 操作 ， 如 移动 、 
缩放 和 旋转 等 ， 这 些 操 作 可 以 借助 Canvas API 中 提供 的 相关 方法 来 实现 。 通 过 调用 Canvas API 中 提供 
的 相关 方法 ， 可 以 将 多 块 图 形 以 不 同 的 方式 结合 在 一 起 展示 ， 还 可 以 通过 增加 阴影 属性 值 ， 为 图 形 添 
加 不 同方 向 的 阴影 效果 。 

区 EI: 实例 9-10: 移动 、 缩 放 和 旋转 网 页 中 的 正方 形 

- v, .源码 路 径 ; 光盘 :vcodes9\l0html 00000 

在 本 实例 中 新 建 了 一 个 <canvas> 元 素 ， 当 页 面 被 加 载 时 ， 在 画布 中 绘制 一 个 正方 形 。 并 创建 3 个 
<span> 标 记 ， 将 内 容 分 别 设置 为 “移动 ”、“ 缩 放 ” 和 “旋转 ”， 当 单 击 某 个 <span> 标 记 时 ， 对 画布 
中 已 绘制 的 正方 形 进行 相应 的 操作 。 实 例文 件 10.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src="js10.js"/> 
</script> 
</head> 
«body onLoad="drawRect();"> 
«div»«p» 
«span onClick="spn1_click();"> 移 动 </span> 
«span onClick="spn2_click():"> 缩 放 </span> 
«span onClick="spn3_click();"> 旋 转 </span></p> 
<canvas id="cnvMain" width="280px" height="190px"></canvas> 
<div> 


<Ibody> 
脚本 文件 js10jjs 的 具体 实现 代码 如 下 。 


function $$(id) ( 
return document.getElementByld(id); 


} 
// 绘 制 一 个 正方 形 
function drawRect()( 
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var cnv-$$("cnvMain"); 

var cxt-cnv.getContext("2d"); 
/设置 边框 
cxt.strokeStyle-" 666"; 
cxt.lineWidth-2; 
cxt.strokeRect(105,70,60,60); 


} 

// 上 下 移动 已 绘制 的 正方 形 

function spn1 click()( 
var cnv-$$("cnvMain"); 
var cxt-cnv.getContext("2d"); 
cxt.translate(-20,-20); 
drawRect(); 
cxt.translate(40,40); 
drawRect(); 


) 

/| 缩放 已 绘制 的 正方 形 

function spn2. click()( 
var cnv-$$("cnvMain"); 
var cxt-cnv.getContext("2d"); 
cxt.scale(1.2,1.2); 
drawRect(); 
cxt.scale(1.2,1.2); 
drawRect(); 


) 

// 旋 转 已 绘制 的 正方 形 

function spn3 click()( 
var cnv-$$("cnvMain"); 
var cxt-cnv.getContext("2d"); 
cxt.rotate(Math.Pl/8); 
drawRect(); 
cxt.rotate(-Math.Pl/A); 
drawRect(); 

) 


执行 后 的 效果 如 图 9-10 所 示 。 
9.3.10 ”使 用 组 合 的 方式 显示 图 形 


如 果 想 在 画布 中 绘制 有 多 个 交叉 点 的 图 形 ， 则 需要 根据 绘制 
时 的 先后 顺序 显示 每 个 图 形 ， 在 交叉 处 新 绘制 的 图 形 会 覆盖 原 有 
图 形 。 如 果 想 要 改变 这 种 默认 多 图 组 合 的 显示 形式 ， 可 以 通过 修 
改 上 下 文 环境 对 象 的 globalCompositeOperation 属性 值 来 实现 。 此 
属性 有 多 个 属性 值 ， 具 体 说 明 如 下 。 
source-over: 显示 图 形 时 ， 新 绘制 的 图 形 将 覆盖 原先 绘制 的 图 形 ， 这 是 默认 值 。 
copy: 只 显示 新 图 形 ， 其 他 部 分 作 透 明 处 理 。 
darker: 两 种 图 形 都 显示 ， 在 图 形 重合 部 分 ， 颜 色 由 两 个 图 形 的 颜色 值 相 减 后 形成 。 
destination-atop: 只 显示 新 图 形 与 原 图 形 重合 的 部 分 及 新 图 形 的 其 余部 分 , 其 他 部 分 作 透 明 处 理 。 
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E] destination-in: 只 显示 原 图 形 中 与 新 图 形 重合 的 部 分 ， 其 他 部 分 作 透 明 处 理 。 

E] destination-out: 只 显示 原 图 形 中 与 新 图 形 不 重合 的 部 分 ， 其 他 部 分 作 透 明 处 理 。 

E] destination-over: 与 source-over 属性 相反 ， 原 先 绘制 的 图 形 将 覆盖 新 绘制 的 图 形 。 

回 lighter: 两 种 图 形 都 显示 ， 在 图 形 重 每 的 部 分 ， 颜 色 由 两 个 图 形 的 颜色 值 相 加 后 形成 。 

E]  source-atop: 只 显示 原 图 形 中 与 新 图 形 重 辣 的 部 分 及 原 图 形 的 其 余部 分 , 其 他 部 分 作 透 明 处 理 。 
El source-in: 只 显示 新 图 形 中 与 原 图 形 重合 的 部 分 ， 其 他 部 分 作 透 明 处 理 。 

source-out: 只 显示 新 图 形 中 与 原 图 形 不 重合 的 部 分 ， 其 他 部 分 作 透 明 处 理 。 

E] xor 两 种 图 形 都 绘制 ， 并 透明 处 理 图 形 重 县 部 分 。 

其 中 ，source 表示 新 图 形 资 源 ，destination 表示 原 图 形 资源 。 


实例 9-11: 在 网 页 中 使 用 组 合 的 方式 显示 图 形 


源码 路 径 : 光盘 :\codes\9\11.html 


在 本 实例 的 页 面 中 新 建 了 一 个 <canvas> 元 素 ， 当 页 面 被 加 载 时 ， 调 用 自 定义 的 函数 pageload0， 通 
过 该 函数 创建 一 个 正方 形 和 圆 形 , 将 两 个 图 形 组 合 后 的 globalCompositeOperation 的 属性 值 设 为 lighter， 
并 将 组 合 后 的 图 形 结果 显示 在 画布 中 。 实 例文 件 11.html 的 主要 代码 如 下 。 

«script type-"text/javascript" language-"jscript" 

src-"js11.js"/ 

</script> 

</head> 

«body onLoad-"pageload();"» 

«canvas id-"cnvMain" width="280px" height-"190px"» «/canvas» 
</body> 


编写 脚本 文件 js11.js。 首 先 自 定义 两 个 函数 : drawRectQ 5 drawCire()， 分 别 用 于 根据 传 入 的 上 下 

文 环 境 参 数值 绘制 正方 形 与 圆 形 ， 当 加 载 页 面 时 ， 触 发 页 面 的 onLoad 事件 ， 在 该 事件 中 调用 另 一 个 自 
定义 函数 pageload0， 此 函数 的 运作 流程 如 下 。 

CD 通过 ID 号 获取 画布 元 素 <canvas>， 并 根据 画布 元 素 取得 上 下 文 环境 对 象 cxt。 

(2) 传递 cxt 对 象 ， 调 用 函数 drawRect0， 在 画布 中 先 绘制 一 个 正方 形 。 

(3) 设置 globalCompositeOperation 属性 值 为 lighter， 表 明 与 下 面 图 形 组合 时 的 显示 方式 。 

CA) 调用 函数 drawCirc0 在 画布 中 绘制 一 个 圆 形 ， 两 个 图 形 的 重合 部 分 将 按照 设置 的 globalComposite 
Operation 属性 值 进行 组 合 显示 。 


文件 jslljs 的 主要 代码 如 下 。 

I| JavaScript Document 

function $$(id) ( 
return document.getElementByld(id); 

l 

function pageload()( 
var cnv-$$("cnvMain"); 
var cxt-cnv.getContext("2d"); 
drawRect(cxt); 
cxt.globalCompositeOperation- "lighter"; 
drawCirc(cxt); 

) 
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/绘制 一 个 正方 形 


function drawRect(cxt)( 
cxt.fillStyle-" 666"; 
cxt.fillRect(60,50,80,80); 
} 
/绘制 一 个 圆 形 
function drawCirc(cxt)( 
cxt.beginPath() 
cxt.arc(130,120,50,0,Math.PI*2,true); 
cxt.closePath() 
cxt fillStyle-" ccc"; 
cxt-fill(); 
) 
执行 后 的 效果 如 图 9-11 所 示 。 ee : 
9.3.11 ”使 用 不 同 的 方式 平 铺 指定 的 图 像 | 
在 画布 中 除了 可 以 对 绘制 的 图 像 进行 缩放 绘制 外 , 还 可 以 通过 调 。 


用 上 下 文 环境 对 象 中 的 createPattern( 方 法 关联 图 像 元 素 。 选 择 平 铺 
方式 创建 一 个 平 铺 的 对 象 ， 并 将 该 平 铺 对 象 赋值 给 fillStyle 属性 。 
通过 调用 方法 fillRect0 将 该 平 铺 对 象 绘制 在 画布 中 ， 从 而 实现 平 
铺 图 像 的 效果 。 使 用 createPattern0 方 法 的 格式 如 下 。 


cxt.createPattern(image,type) 


其 中 , ext 为 上 下 文 环 境 对 象 名 称 ; 参数 image 表示 被 平 铺 的 图 像 ; 参数 type 表示 图 像 平 铺 的 方式 ， 
该 参数 有 4 种 取 值 ， 具 体 说 明 如 下 。 

E] no-repeat: 不 平 铺 绘制 的 图 像 。 

E] repeat-x: 按 水 平方 向 横向 平 铺 所 绘制 的 图 像 。 

E] repeat-y: 按 垂直 方向 纵向 平 铺 所 绘制 的 图 像 。 

E] repeat: 全 方位 平 铺 所 绘制 的 图 像 。 


区 1 | 村 se OUR 


9-11 执行 效果 


源码 路 径 : 光盘 :\codes\9\12 .html 


在 本 实例 的 页 面 中 新 建 了 一 个 <canvas> 元 素 ， 每 次 单 击 画布 元 素 时 都 调用 不 同 的 平 铺 方 式 ， 将 图 
像 显示 在 画布 元 素 中 。 实 例文 件 12.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src="js12.js"/> 


</script> 
</head> 
<body> 
«canvas id-"cnvMain" width-"280px" height-"190px" 
onClicke"cnvclick(this);"»- 
</canvas> 
</body> 
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编写 脚本 文件 js12.js。 首先 根据 单 击 画布 的 累加 总 量 intNum 的 值 , 获取 图 像 在 画布 中 的 平 铺 方式 ， 
并 保存 至 变量 strPmType H. 使 用 方法 clearRect0 清 空 每 次 在 画布 中 绘制 的 图 形 ， 并 定义 一 个 Image 对 
象 ， 设 置 该 对 象 加 载 图 像 的 路 径 。 再 根据 该 图 像 与 平 铺 方式 变量 sttrPmType 的 值 新 建 一 个 平 铺 对 象 。 
在 加 载 图 像 的 onload 事件 中 , 将 pm 平 铺 对 象 赋值 给 fillStyle 属性 , 通过 fillRect0 方 法 将 平 铺 对 象 绘制 
在 整个 画布 中 ，cnv.width 与 cnv.height 值 分 别 为 画 宽 与 高 。 文 件 js12jjs 的 主要 代码 如 下 。 


I| JavaScript Document 
/定义 保存 单 击 次 数 的 全 局 变量 
var intNum = 0; 
// 自 定义 画布 单 击 函 数 
function cnvclick(cnv) ( 
intNum += 1; 
intNum = (intNum == 5) ? 1 : intNum; 
var strPrnType = ""; 
switch (intNum) ( 
case 1: 
strPrnType = "no-repeat"; 
break; 
case 2: 
strPrnType = "repeat-x"; 
break; 
case 3: 
strPrnType - "repeat-y"; 
break; 
case 4: 
strPrnType = "repeat"; 
break; 


) 
var cxt = cnv.getContext("2d"); 
cxt.clearRect(0, 0, cnv.width, cnv.height); 
var objlmg 7 new Image(); 
objlmg.src = "1.jpg"; 
var prn 7 cxt.createPattern(objlmg, strPrnType); 
objlmg.onload = function() ( 

cxt.fillStyle = prn; 

cxt.fillRect(0, 0, cnv.width, cnv.height); 
) 

) 


执行 后 的 效果 如 图 9-12 Bras o 


9-12 ”执行 效果 
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9.3.12 ”切割 指定 的 图 像 


通过 <canvas> 不 仅 能 够 以 各 种 方式 平 铺 绘制 的 图 像 ， 而 且 可 以 通过 调用 上 下 文 环境 对 象 中 的 方法 
clip0 切 割 画布 中 绘制 的 图 像 。clip() 方 法 的 调用 格式 如 下 。 

cxt.clip() 

其 中 ，cxt 表示 上 下 文 环 境 对 象 名 称 。 该 方法 是 一 个 无 参数 方法 ， 用 于 切割 使 用 路 径 方 式 在 画布 中 
绘制 的 区 域 。 在 使 用 该 方法 前 ， 必 须 使 用 路 径 的 方式 在 画布 中 绘制 一 个 区 域 ， 才 能 通过 调用 clip0 方 法 
对 该 区 域 进行 切割 。 


实例 9-13: 在 页 面 中 切割 指定 的 图 像 
源码 路 径 : 光盘 :\codes\9\13.html 


实例 文件 13.html 的 主要 代码 如 下 。 
«script type-"text/javascript" language-"jscript" 
src="js13.js"/> 

</script> 
</head> 
«body onLoad="pageload();"> 

<canvas id="cnvMain" width="280px" height="190px"></canvas> 
</body> 


编写 脚本 文件 js13js。 设 置 加 载 页 面 时 触发 onLoad0 事 件 ， 在 该 事件 中 调用 了 自 定义 的 函数 
pageload0， 此 函数 的 具体 运作 流程 如 下 。 

(1) 创建 一 个 Image 对 象 ， 并 设置 该 对 象 加 载 图 像 的 路 径 。 在 加 载 图 像 的 过 程 中 ， 调 用 另外 一 个 
自 定义 函数 drawCirc0， 绘 制 一 个 圆 形 路 径 ， 并 使 用 stroke0 方 法 将 路 径 绘制 在 画布 中 。 

COD 调用 方法 clip0 将 画布 中 的 圆 路 径 进 行 切割 。 其 中 在 调用 函数 drawCire0 时 ， 参 数 ext 表示 上 
下 文 环境 对 象 名 称 ;，intR 表示 圆 半径 ; blnC 表示 是 否 需要 对 绘制 图 形 进行 切割 ，true 表示 需要 ，false 

(3) 使 用 drawImage() 方 法 在 画布 中 绘制 一 个 左上 角 坐 标 为 (70.3) 的 图 像 。 因 为 绘制 图 像 前 画布 已 
按照 圆 路 径 进行 了 切割 ， 所 以 加 载 的 图 像 也 按照 该 切割 后 的 圆 形 区 域 进 行 绘制 。 

(4) 第 二 次 调用 自 定义 函数 drawCirc0， 绘 制 一 个 与 第 一 个 圆 路 径 同 圆心 不 同 半 径 的 小 圆 形 ， 并 
设置 “fillstyle” 的 属性 值 为 “#fEf”， 通 过 fil0 方 法 进行 填充 ， 形 成 光盘 中 大 圆 中 的 小 圆 部 分 。 

文件 js13.js 的 主要 代码 如 下 。 


function $$(id) { 
return document.getElementByld(id); 


i 
// 自 定义 页 面 加 载 时 调用 的 函数 
function pageload(){ 
var cnv = $$("cnvMain"); 
var cxt = cnv.getContext("2d"); 
var objlmg 7 new Image(); 
objImg.src = "1.jpg"; 
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objlmg.onload = function() ( 
drawCirc(cxt, 60, true); 
cxt.drawlmage(objImg, 70, 3); 
drawCirc(cxt, 10, false); 

> 


} 
// 根 据 相关 参数 绘制 贺 
function drawCirc(cxt, intR, bInC) ( 
cxt.beginPath(); 
cxt.arc(140, 95, intR, 0, Math.PI * 2, true); 
cxt.closePath(); 
// 设 置 边框 颜色 
cxt.strokeStyle = "#666"; 
/设置 边框 宽度 
cxt.lineWidth = 3; 
/开始 描 边 
cxtstroke(); 
if (bInC) ( 
/切割 图 形 
cxt.clip(); 
}else { 
/设置 填充 色 
cxt.fillStyle = "fff": 
// 填 充 图 形 
cxt.fill(); 
) 
) 


执行 后 的 效果 如 图 9-13 所 示 。 


图 9-13 执行 效果 


第 10 章 数据 存储 


在 HTML 4 中 , 有 两 种 数据 存储 方式 : Cookie 和 Session. 这 两 种 存储 方式 都 有 时 间 和 大 小 的 限制 ， 
例如 ， 大 多 数 浏览 器 对 Cookie 的 限制 为 最 多 不 能 超过 4096 个 字 节 (KB) ， 并 且 Cookie 的 数量 总 共 
不 能 超过 300 个 。 这 些 限 制 无 法 满足 现实 中 站 点 的 需求 ， 为 了 解决 这 个 问题 ， 在 HTML 5 中 新 增加 了 
3 种 数据 存储 方式 ， 分 别 是 本 地 数据 存储 、Session 存储 和 离线 存储 。 本 章 将 详细 介绍 这 3 种 数据 存储 
的 基本 知识 ， 并 通过 几 个 具体 实例 来 演示 具体 流程 。 


10.1 Web 存储 


Chu 知识 点 讲解 : 光盘 \ 视 频 讲解 第 10 章 \Web 存储 .avi 

无 论 是 处 理 多 媒体 文件 ， 还 是 绘制 图 形 图 像 ， 这 些 都 不 是 HTML 5 最 强大 的 功能 ， 真 正 令 用 户 感 
到 震撼 的 是 HTML 5 的 数据 存储 功能 。 使 用 全 新 的 HTML 5， 可 以 将 数据 存放 在 客户 端 ， 而 无 须 使 用 
专业 的 数据 库 工具 。 


10.1.1 什么 是 Web 存储 


使 用 HTML 5 技术 可 以 在 客户 端 存储 数据 。 HTML 5 中 提供 了 如 下 两 种 在 客户 端 存储 数据 的 新 方法 。 

回 localStorage: 没有 时 间 限 制 的 数据 存储 。 

回 sessionStorage: 针对 一 个 Session 的 数据 存储 。 

在 这 以 前 ， 客 户 端 的 存储 功能 都 是 通过 Cookie 来 完成 的 。 但 因为 Cookie 由 每 个 对 服务 器 的 请 求 
来 传递 ， 所 以 不 适合 大 量 数据 的 存储 ， 这 使 得 Cookie 速度 很 慢 而 且 效 率 也 不 高 。 

在 HTML 5 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传递 的 ， 而 是 只 有 在 请 求 时 使 用 数据 ， 这 样 便 使 在 不 
影响 网 站 性 能 的 情况 下 存储 大 量 数 据 成 为 可 能 。 对 于 不 同 的 网 站 来 说 ， 数 据 存储 于 不 同 的 区 域 ， 并 且 
网 站 只 能 访问 其 自身 的 数据 。 

在 HTML 5 中 可 以 使 用 JavaScript 来 存储 和 访问 数据 。 


10.1.2. Web 存储 的 影响 


Cookie 的 出 现 可 谓 大 大 推动 了 Web 的 发 展 ， 虽 然 它 既 有 优点 也 有 一 定 的 缺陷 ， 但 是 功 大 于 过 。 
Cookie 的 优点 是 允许 用 户 在 登录 网 站 时 ， 记 住 输入 的 用 户 名 和 密码 ， 这 样 在 下 一 次 登录 时 就 不 需要 再 
次 输入 ， 从 而 达到 自动 登录 的 效果 。 

但 是 另 一 方面 ，Cookie 的 安全 问题 也 日 趋 受到 关注 , 例如 Cookie 由 于 存储 在 客户 端 浏览 器 中 ,很 
容易 受到 黑客 的 窃取 ， 安 全 机 制 并 不 是 十 分 好 。 还 有 另外 一 个 问题 ，Cookie 存储 数据 的 能 力 有 限 。 目 
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前 在 很 多 浏览 器 中 规定 , 每 个 Cookie 只 能 存储 不 超过 AKB 的 数据 , 所 以 一 旦 Cookie 的 内 容 超过 4KB， 
唯一 的 方法 是 重新 创建 。 此 外 ，Cookie 的 一 个 缺陷 是 每 次 的 HTTP 请 求 中 都 必须 附带 Cookie， 这 将 有 
可 能 增加 网 络 的 负载 。 
使 用 HTML 5 中 新 增加 的 Web 存储 机 制 ， 可 以 弥补 Cookie 的 缺点 ，Web 存储 机 制 在 以 下 两 方面 
做 了 加 强 。 
(1) 对 于 Web 开发 者 来 说 ， 它 提供 了 很 容易 使 用 的 API 接口 ， 通 过 设置 键 值 对 即 可 使 用 。 
(20 在 存储 的 容量 方面 ， 可 以 根据 用 户 分 配 的 磁盘 配额 进行 存储 ， 这 就 可 以 在 每 个 用 户 域 下 存储 
不 少 于 5 一 10MB 的 内 容 。 这 就 意味 者 ， 用 户 不 仅 可 以 存储 Session， 还 可 以 在 客户 端 存储 用 户 的 设置 
偏好 、 本 地 化 的 数据 、 离 线 的 数据 ， 这 对 提高 效率 很 有 帮助 。 
而 Web 存储 更 提供 了 使 用 JavaScript 编程 的 接口 , 这 将 使 得 开发 者 可 以 使 用 JavaScript 在 客户 端 做 
很 多 以 前 要 在 服务 端 才能 完成 的 工作 。 现 在 各 个 主流 浏览 器 已 经 开始 支持 Web 存储 。 


10.2 HTML 5 中 的 两 种 存储 方法 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 第 10 章 \HTML 5 中 的 两 种 存储 方法 .avi 
TE HTML 5 中， 主要 有 两 种 数据 存储 的 方式 ， 分 别 使 用 方法 localStorage 和 方法 sessionStorage 实 
现 。 本 节 将 详细 讲解 这 两 种 存储 方式 的 使 用 方法 。 


10.2.1 使 用 localStorage 方法 


使 用 localStorage 方法 存储 数据 没有 任何 时 间 限 制 ， 我 们 在 第 二 天 、 第 二 周 甚至 是 一 年 之 后 仍然 可 
以 使 用 存储 的 数据 。 
C 实例 10-1; 显示 访问 页 面 的 统计 次 数 000 — 
源码 路 径 : 光盘 :\codes\10\1.html 


本 实例 的 功能 是 统计 访问 页 面 的 次 数 ,每 当 刷 新 一 次 页 面 ,访问 次 数 就 会 增加 1 次 .实例 文件 1.html 
的 主要 代码 如 下 。 
«IDOCTYPE HTML> 


<html> 
<body> 


«script type="text/javascript"> 

if (localStorage.pagecount) 
localStorage.pagecount-Number(localStorage.pagecount) +1; 
} 


else 


t 
localStorage.pagecount-1; 
ji 


(0 Android 移动 网 站 开发 详解 


document.write("Visits: " + localStorage.pagecount + " time(s)."); 
</script> 

<p> 刷 新 页 面 会 看 到 计数 器 在 增长 。</p> 

<p> 请 关闭 浏览 器 窗口 ， 然 后 再 试 一 次 ， 计 数 器 会 继续 计数 。</p> 


</body> 
</html> 


执行 效果 如 图 10-1 所 示 。 


Visits: 7 time(s). 


10.2.2 使 用 sessionStorage 方法 刷新 页 面 会 看 到 计数 器 在 增长 。 


请 关闭 浏览 器 窗口 ， 然 后 再 试 一 次 ， 计 数 器 会 继续 计数 。 
方法 sessionStorage 比较 体贴 ， 因 为 可 以 针对 有 具体 图 10-1 执行 效果 


某 一 个 Session 进行 数据 存储 ， 当 用 户 关 闭 浏览 器 窗口 


后 ， 


数据 会 被 删除 。 例 如 ， 在 下 面 的 代码 中 演示 了 创建 并 访问 一 个 sessionStorage 的 过 程 。 


«IDOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 
sessionStorage.lastname="Smith"; 
document.write(sessionStorage.lastname); 


实例 10-2: 显示 访问 页 面 的 统计 次 数 
源码 路 径 : 光盘 :\codes\10\2.html 


本 实例 的 功能 是 统计 访问 页 面 的 次 数 ,每 当 刷 新 一 次 页 面 ,访问 次 数 就 会 增加 1 次 。 实 例文 件 2.html 


的 主要 代码 如 下 。 


176 


«IDOCTYPE HTML» 

«html» 

«body» 

«script type-"text/javascript"» 

if (sessionStorage.pagecount) 
sessionStorage.pagecount-Number(sessionStorage.pagecount) +1; 
H 

else 


sessionStorage.pagecount-1; 


document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); 
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</script> 
<p> 刷 新 页 面 会 看 到 计数 器 在 增长 。</p> 
<p> 请 关闭 浏览 器 窗口 ， 然 后 再 试 一 次 ， 计 数 器 已 经 重 置 了 。</p> 


</body> 
</html> 


执行 效果 如 图 10-2 所 示 。 
Visits 3 time(s) this session. 
刷新 页 面 会 看 到 计数 器 在 增长 。 
请 关闭 浏览 器 窗口 ， 然 后 再 试 一 次 ， 计 数 器 已 经 重 置 了 。 
图 10-2 执行 效果 


注意 : 实例 10-2 的 统计 和 实例 10-1 有 一 点 区 别 ， 实 例 10-2 中 当 关 闭 浏览 器 再 次 打开 后 ， 统 计数 字 将 从 1 
开始 重新 统计 。 而 实例 10-1 重 新 打开 后 继续 从 被 关闭 时 的 次 数 累 加 统计 。 


10.3 ”数据 存储 对 象 


GRU 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 10 章 \ 数 据 存储 对 象 .avi 

Web Storage 页 面 存储 是 HTML 5 为 数据 存储 在 客户 端 提供 的 一 项 重要 功能 , 因为 Web Storage API 
可 以 区 分 会 话 数 据 与 长 期 数据 ， 因 此 相应 的 API 可 以 分 为 如 下 两 种 类 型 。 
回 sessionStorage: 保存 会 话 数据 。 
E] localStorage: 在 客户 端 长 期 保存 数据 。 
因为 Web Storage API 可 以 将 客户 端的 数据 按照 类 型 进行 存储 ， 所 以 存储 功能 比 传统 、 单 一 的 
Cookie 方式 要 优秀 。 


10.3.1 使 用 sessionStorage 对 象 


使 用 sessionStorage 对 象 保存 数据 的 时 间 较 短 ， 因 为 数据 实质 上 是 被 保存 在 Session 对 象 中 ， 当 打 
开 浏 览 器 时 ， 可 以 查看 操作 过 程 中 临时 保存 的 数据 : 而 关闭 浏览 器 后 ， 则 所 有 用 sessionStorage 对 象 保 
存 的 数据 会 全 部 丢失 。 使 用 sessionStorage 对 象 保存 数据 的 方法 非常 简单 ， 只 需要 调用 setItem() 方 法 即 
可 ， 具 体 调用 格式 如 下 。 
sessionStorage. setltem( key, value) 
参数 说 明 如 下 。 
El key: 表示 被 保存 内 容 的 键 名 。 
回 value: 表示 被 保存 内 容 的 键 值 ， 在 使 用 setItem0 方 法 保存 数据 时 ， 对 应 格式 为 “ 键 名 , 键 值 ”。 
成 功 设置 键 名 后 不 允许 再 修改 ， 也 不 能 重复 。 如 果 有 重复 的 键 名 ， 那 么 只 能 修改 对 应 的 键 值 ， 
即 用 新 增 重 复 的 键 名 值 取 代 原 有 重复 的 键 名 值 。 
© 
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当 使 用 sessionStorage 对 象 中 的 方法 setItem0 保 存 数 据 后 ， 如 果 需 要 读 取 被 保存 的 数据 ， 应 该 调用 
sessionStorage 对 象 中 的 getItem0 方 法 ， 具 体 调用 格式 如 下 。 


sessionStorage.getltem(key) 


其 中 ， 参 数 key 表示 设置 保存 时 被 保存 内 容 的 键 名 。 该 方法 将 返回 一 个 指定 键 名 对 应 的 键 值 ， 如 
果 不 存在 ， 则 返回 一 个 null 值 。 
区 E 实例 10-3. 使 用 sessionStorage 对 象 保存 并 读 取 临时 数据 
» 源码 路 径 : 光盘 :\codes\10\3 .html 


在 本 实例 中 分 别 创建 一 个 文本 框 和 一 个 读 取 按 钮 ， 当 在 文本 框 中 输入 内 容 时 ， 通 过 sessionStorage 
对 象 保 存 文本 框 输入 的 内 容 ， 并 即时 显示 在 页 面 中 。 单 击 “ 读 取 ” 按 钮 时 ， 会 直接 读 取 被 保存 的 临时 
数据 。 实 例文 件 3.html 的 主要 代码 如 下 。 


«IDOCTYPE html> 

<html> 

<head> 

«meta charset-"utf-8" /> 

<title> 使 用 sessionStorage</title> 

«link href="css.css" rel="stylesheet" type="text/css"> 

«script type-"text/javascript" language-"jscript" 

Src-"js3.js"/» 

</script> 

</head> 

<body> 

<fieldset> 
<legend>sessionStorage 对 象 保存 与 读 取 临时 数据 </legend> 
«input name="txtName" type-"text" class-"inputtxt" 
onChange-"txtName changectthis);" size="30px"> 
«input name-"btnGetValue" type="button" class-"inputbtn" 
onClick-"btnGetValue click();" value=" 读 取 "> 
«p id="pStatus"></p> 
</fieldset> 
</body> 
</html> 


编写 脚本 文件 js3.js， 当 在 文本 框 ktName_change0 中 输入 内 容 时 会 触发 onChange 事件 ,在 此 调用 
自 定 义 的 函数 txtName_change0， 此 函数 的 运作 流程 如 下 。 
(1) 通过 变量 sttName 获取 传 过 来 的 文本 框 内 容 。 
(2) 通过 调用 sessionStorage 对 象 中 的 setItem0 方 法 ， 将 该 内 容 值 保存 到 Session 对 象 中 。 其 中 ， 
键 名 为 sttName， 对 应 键 值 为 已 获取 内 容 的 变量 sttName。 
G) 完成 保存 后 ， 调 用 sessionStorage 对 象 中 的 getttem() 方 法 ， 根 据 保存 的 键 名 将 对 应 的 键 值 通 
xt ID 号 为 pStatus 的 元 素 <p> 显 示 在 页 面 中 。 
文件 js3.js 的 主要 代码 如 下 。 


function $$(id) { 
return document.getElementByld(id); 


e. 
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} 
/| 输入 文本 框 内 容 时 调用 的 函数 
function txtName_change(v) { 
var strName = v.value; 
sessionStorage.setltem("strName", strName); 
$$("pStatus").style.display = "block"; 
S$$("pStatus").innerHTML = sessionStorage.getltem("strName"); 


} 
/| 单 击 “ 读 取 ” 按 钮 时 调用 的 函数 
function btnGetValue_click() { 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = sessionStorage.getltem("strName"); 
} 


执行 后 的 效果 如 图 10-3 所 示 。 在 文本 框 中 输入 数据 ， 例 如 输入 “123”， 单 击 “ 读 取 ” 按 钮 后 ， 
会 在 下 方 显示 存储 的 数据 ， 如 图 10-4 所 示 。 


sessi onStorage SO (EG ARRIR EHE. 


123 Ej 
sessi orStorage BURG IERI GR TUS 15 
| =] h ! 
图 10-3 初始 效果 图 10-4 显示 存储 的 数据 


10.3.2 ”使 用 localStorage 对 象 


10.3.1 节 学 习 了 使 用 sessionStorage 对 象 保存 数据 的 方法 , 但 使 用 sessionStorage 对 象 只 能 临时 保存 
会 话 数 据 ， 关 闭 浏览 器 后 数据 会 丢失 。 如 果 需 要 长 期 在 客户 端 保存 数据 ， 不 建议 使 用 sessionStorage 对 
象 ， 而 应 该 使 用 HTML 5 中 的 新 对 象 localStorage。 通 过 此 对 象 可 以 将 数据 长 期 保存 在 客户 端 ， 一 直到 
人 工 清除 为 止 。 使 用 localStorage 对 象 保存 数据 内 容 时 ， 需 要 通过 如 下 格式 调用 方法 setItem()。 

localStorage. setltem(key,value) 

与 sessionStorage 对 象 保存 数据 的 方法 参数 相同 ，localStorage 对 象 也 是 通过 调用 setItem() 方 法 ， 按 
照 ( 键 名 , 键 值 ) 的 方式 进行 设置 ， 只 是 调用 的 对 象 不 一 样 。 当 使 用 localStorage 对 象 保 存 数据 后 ， 可 以 调 
用 对 象 中 的 getItem0 方 法 读 取 指定 键 名 所 对 应 的 键 值 ， 具 体 调用 格式 如 下 。 

localStorage.getltem(key) 

其 中 ， 参 数 key 表示 需要 读 取 键 值 内 容 的 键 名 。 与 sessionStorage 对 象 一 样 ， 如 果 键 名 不 存在 ， 则 
返回 一 个 noll 值 。 

localStorage 对 象 可 以 将 内 容 长 期 保存 在 客户 端 ， 即 使 重新 打开 浏览 器 ， 也 不 会 丢失 。 如 果 需 要 清 
BR localStorage 对 象 保存 的 内 容 , 需要 调用 localStorage 对 象 的 另 一 个 方法 removeItem(), 具体 调用 格式 
如 下 。 


localStorage.removeltem(key) 


Ò 
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其 中 ， 参 数 key 表示 需要 删除 的 键 名 。 如 果 删 除 成 功 ， 则 会 删除 所 有 与 键 名 对 应 的 数据 。 


C 实例 10-4: 读 取 并 保存 登录 用 户 名 和 密码 
源码 路 径 : 光盘 :\codes\10V.html 


在 本 实例 中 新 建 了 一 个 登录 页 面 ， 当 用 户 在 文本 框 中 输入 用 户 名 与 密码 并 单 击 “ 登 录 ” 按 钮 后 ， 
会 使 用 localStorage 对 象 保存 登录 时 的 用 户 名 。 如 果 选 中 “保存 密码 ? ” 复 选 框 ， 则 保存 登录 时 的 密码 ， 
否则 将 清空 原先 保存 的 密码 。 当 重新 在 浏览 器 中 打开 该 页 面 时 ， 将 分 别 在 相应 的 文本 框 中 显示 保存 的 
用 户 名 和 密码 。 实 例文 件 4.html 的 主要 代码 如 下 。 

«script type-"text/javascript" language-"jscript" 

Src-"js4 js"/ 

</script> 

</head> 

<body onLoad="pageload();"> 

<form id="frmLogin" action="#"> 


<fieldset> 
<legend> 登 录 </legend> 
«ul» 
<li class-"li top" 
«span id-"spnStatus"»«/span» 
«lli» 
<li> 名 称 : 
«input id-"txtName" class-"inputtxt" 
type="text"> 
«lli» 
«li» 88 : 
«input id-"txtPass" class-"inputtxt" 
-"password"» 
«lli» 
<li> 
<input id="chkSave" type="checkbox"> 
保存 密码 ? 
«lli» 
<li classz"li bot" 
«input name-"btnLogin" class-"inputbtn" value=" 3" 
type="button" onClick-"btnLogin click();"» 
«input name-"rstLogin" class-"inputbtn" 
type-"reset" value=" 取 消 "> 
«lli» 
«Iul 
</fieldset> 
</form> 
</body> 


编写 脚本 文件 js4js， 设 置 在 加 载 页 面 时 调用 自 定义 的 函数 pageload0， 此 函数 的 运作 流程 如 下 。 

(1) 通过 localStorage 对 象 中 的 getItem0) 方 法 获取 指定 键 名 的 键 值 ， 并 保存 在 变量 中 。 如 果 不 为 
空 ， 则 将 该 变量 值 赋 值 于 对 应 的 文本 框 ， 用 户 下 次 登录 时 不 用 再 次 输入 ， 以 方便 用 户 的 操作 。 

CO 用 户 单 击 “ 登 录 ” 按 钮 时 ， 会 触发 onClick 事件 ， 通 过 此 事件 调用 另外 一 个 自 定义 的 函数 


e. 
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btnLogin click0。 该 函数 先 通过 两 个 变量 保存 在 文本 框 中 输出 的 用 户 名 与 密码 ， 然 后 调用 localStorage 
对 象 中 的 setItem0 方 法 ， 将 用 户 名 作为 键 名 keyName 的 键 值 进行 保存 。 如 果 选 中 “保存 密码 ? ” 复 选 
框 ， 则 将 密码 作为 键 名 keyPass 的 键 值 进行 保存 ， 否 则 ， 将 调用 localStorage 对 象 中 的 removeItemQ77 
法 ， 删 除 键 名 为 keyPass 的 记录 。 

文件 js4.js 的 主要 代码 如 下 。 


I| JavaScript Document 
function $$(id) { 
return document.getElementByld(id); 


} 
// 页 面 加 载 时 调用 的 函数 
function pageload(){ 
var strName - localStorage.getltem("keyName"); 
var strPass - localStorage.getltem("keyPass"); 
if (strName) ( 
$$("txtName").value = strName; 


} 
if (strPass) { 

$$("txtPass").value = strPass; 
} 


} 
// 单 击 “登录 ”按钮 后 调用 的 函数 
function btnLogin_click() { 
var strName = $$("txtName").value 
var strPass = $$("txtPass").value; 
localStorage.setltem("keyName", strName); 
if ($$("chkSave").checked) { 
localStorage.setltem("keyPass", strPass); 
}else{ 
localStorage.removeltem("keyPass"); 


} 
$$("spnStatus").className = "status"; 
$$("spnStatus").innerHTML = "登录 成 功 !"; 
} 
执行 后 的 效果 如 图 10-5 所 示 ， 在 文本 框 中 输入 用 户 名 和 密码 ， 然 后 选中 “保存 密码 ? ” 复 选 框 ， 
单 击 “登录 ” 按 钮 后 会 显示 登录 成 功 ， 如 图 10-6 所 示 。 


- p 3&—— 
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EE SR: 一 
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E3 ^ wu * mh 
图 10-5 初始 效果 图 10-6 登录 成 功 


新 在 浏览 器 中 打开 该 页 面 时 ， 将 分 别 在 相应 的 文本 框 中 显示 保存 的 用 户 名 和 密码 ， 如 图 10-7 
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107 自动 显示 保存 的 用 户 名 和 密码 
10.3.3 ”使 用 localStorage 对 象 中 的 clear() 方 法 


在 HTML 5 中， 可 以 调用 localStorage 对 象 中 的 clear0 方 法 清空 localStorage 对 象 中 保存 的 所 有 数 
据 。 具 体 调用 格式 如 下 。 


localStorage.clear(); 


方法 clear0 是 一 个 无 参数 方法 ， 表 示 清 空 全 部 的 数据 。 一 旦 使 用 localStorage 对 象 保存 了 数据 ， 用 
户 就 可 以 在 浏览 器 中 打开 相应 的 代码 调试 工具 ， 查 看 每 条 数据 对 应 的 键 名 与 键 值 。 执 行 删除 或 清空 操 
作 后 ， 其 对 应 的 数据 也 会 发 生变 化 ， 这 些 变化 可 以 通过 浏览 器 的 代码 调试 工具 进行 侦 测 。 


K 实例 10-5: 使 用 localStorage 对 象 中 的 clear0 方 法 
源码 路 径 : 光盘 :\codes\10\5.html 


实例 文件 5.html 的 主要 代码 如 下 。 


«IDOCTYPE html> 
«script type-"text/javascript" language-"jscript" 
Src-"js5.js"/ 
«script» 
</head> 
<body> 
«input id="btnAdd" type="button" value=" 增 加 数据 " 
class-"inputbtn" onClick="btnAdd_Click();"> 
«input id="btnDel" type="button" value=" 清 空 数据 " 
class-"inputbtn" onClick="btnDel_Click();"> 
<p id="pStatus"></p> 
</body> 


脚本 文件 js5jjs 的 主要 代码 如 下 。 


I|JavaScript Document 
function $$(id) ( 
return document.getElementByld(id); 
) 
var intNum = 0; 
// 单 击 “ 增 加 数据 ”按钮 时 调用 
function btnAdd Click() ( 
for (var intl = 0; intl <= 7; intl++) { 


var strKeyName = "strKeyName" + intl; 
e. 
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var strKeyValue = "strKeyValue" + intl; 
localStorage.setlitem(strKeyName, strKeyValue). 
intNum++; 


H 


$S("pStatus").style.display = "block" 
$S("pStatus").innerHTML 


"已 成 功 保存 <b>" + intNum + "</b> 条 数据 记录 ! " 
// 单 击 “清空 数据 ”按钮 时 调用 
function btnDel Click() { 

localStorage.clear(); 


S$S("pStatus").style.display = "block" 
$$("pStatus").innerHTML 
) 


"已 成 功 清空 全 部 数据 记录 ! " 
执行 后 的 效果 如 图 10-8 R. ili 


数据 ”按钮 后 ， 会 保存 8 条 数据 记录 ， 如 图 10-9 所 示 。 
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已 成 功 保存 8 条 数据 记录 


图 10-8 初始 效果 


图 10-9 保存 8 条 数据 记录 
单 击 “ 清 空 数据 ”按钮 后 ， 会 删除 保存 的 8 条 数据 记录 ， 如 图 10-10 所 示 
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图 10-10 ”删除 保存 的 8 条 数据 记录 
10.3.4 ”使 用 localStorage 对 象 中 的 属性 


为 了 查看 localStorage 对 象 保存 的 全 部 数据 信息 ， 通 常 要 遍历 这 些 数据 。 在 遍历 过 程 中 ， 需 要 访问 
localStorage 对 象 的 如 下 两 个 属性 。 
[ral 


length: 表示 localStorage 对 象 中 保存 数据 的 总 量 。 
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回 key: 表示 保存 数据 时 的 键 名 项 ， 该 属性 常 与 索引 号 (index) 配合 使 用 ,表示 第 几 条 键 名 对 应 
的 数据 记录 。 其 中 ，index 以 0 值 开始 。 假 设 取 第 3 条 键 名 对 应 的 数据 ， 则 index 值 应 该 为 2。 


区 实例 10-6: 通过 遍历 的 方式 在 网 页 中 获取 并 显示 数据 
源码 路 径 : 光盘 :\codes\10\6 .html 


本 实例 的 功能 是 ， 在 页 面 中 通过 遍历 的 方式 获取 localStorage 对 象 保存 的 全 部 点 评 数据 记录 。 在 文 
本 框 中 输入 内 容 ， 单 击 “ 发 表 ” 按 钮 后 可 以 通过 localStorage 对 象 保存 输入 的 数据 ， 并 在 页 面 中 实时 显 
示 这 些 数据 。 实 例文 件 6.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
Src-"js6.js"/ 
</script> 
</head> 
<body onLoad="getlocalData();"> 
«ul id="ulMessage"> 
正在 读 取 数 据 中.… 
«Jul» 
<p class-"p4"» 
*textarea id-"txtContent" class-"inputtxt" 
Cols-"37" rows-"5"» 
</textarea><br> 
«input id="btnAdd" type="button" value=" 发 表 " 
class-"inputbtn" onClick="btnAdd_Click();"> 
«Ip» 
</body> 


编写 脚本 文件 js6.js， 设 置 在 加 载 页 面 时 调用 自 定义 函数 getlocalData()。 此 函数 会 根据 localStorage 
对 象 的 length 值 , 使 用 for 语句 遍历 localStorage 对 象 保存 的 全 部 数据 。 在 遍历 过 程 中 , 通过 变量 strKey 
保存 每 次 遍历 的 键 名 。 在 获取 键 名 后 ， 为 了 只 获取 localStorage 对 象 中 保存 的 点 评 数据 ， 检 测 键 名 前 3 


个 字符 是 否 为 cnt。 如 果 是 ， 则 通过 方法 getItem0 获 取 键 名 对 应 的 键 值 ， 并 保存 在 变量 strVal 中 。 因 为 

键 值 是 由 “,” 组 成 的 字符 串 ， 所 以 先 通过 数组 strArr 保存 分 割 后 的 各 项 数值 ， 然 后 通过 数组 下 标 将 各 

项 获取 的 内 容 显示 在 页 面 中 。 如 果 在 页 面 中 输入 点 — sn 

评 内 容 ， 并 单 击 “ 发 表 ” 按 钮 ， 会 调用 另外 一 个 自 XFO MED SEV PLO SEQ IAD Who 

定义 函数 btnAdd_Click0。 此 函数 先 获取 点 评 内 容 ， ua cC 

然后 将 内 容 保存 在 变量 strContent 中 。 为 了 使 保存 。 Eec 7 ]e e e Soo 

内 容 的 键 名 不 重复 ， 并 且 具 有 标记 性 ， 在 生成 键 名 3 We a 

时 调用 函数 RetRndNum0), 随机 生成 一 个 4 位 数字 ， veis 

并 与 字符 ent 组 合成 新 的 字符 串 , 保存 在 变量 strKey 6:13:35 

中 。 为 了 保存 更 多 的 数据 信息 ， 保 存 点 评 内 容 的 变 m 

量 strContent 通过 “,” 与 时 间 数 据 组 合成 新 的 字符 

E, 保存 在 变量 strVal 中 。 最 后 , 通过 方法 setltemQ 

将 变量 strKey 与 strVal 分 别 作为 键 名 与 键 值 ， 保 存 

在 localStorage 对 象 中 。 zm E] 
执行 后 的 效果 如 图 10-11 所 示 。 10-11 执行 效果 
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10.4 WebDB 存储 方式 


C 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 10 章 \WebDB 存储 方式 .avi 

本 章 前 面 的 内 容 详细 介绍 了 Web Storage 存储 本 地 数据 的 方法 。 虽 然 这 种 存储 方法 比较 简单 方便 ， 
但 是 Web Storage 存储 空间 容量 只 有 5MB， 给 用 户 带 来 诸多 不 便 ， 为 此 推出 了 Web SQL 数据 库 (Web 
SQL DataBase, WebDB) ， 它 内 置 了 SQLite 数据 库 。 对 数据 库 的 操作 可 以 通过 调用 方法 executeSql0 
实现 ， 人 允许 使 用 JavaScript 代码 控制 数据 库 的 操作 。 


10.4.1 WebDB 存储 基础 


WebDB 可 以 实现 数据 的 本 地 存储 ， 它 提供 了 关系 数据 库 的 基本 功能 ， 可 以 存储 页 面 中 交互 、 复 杂 
的 数据 。 既 可 以 保存 数据 , 也 可 以 缓存 从 服务 器 获取 的 数据 WebDB 通过 事务 驱动 实现 对 数据 的 管理 ， 
因此 可 以 支持 多 浏览 器 的 并 发 操作 ， 而 不 发 生存 储 时 的 冲突 。 

如 果 要 通过 WebDB 进行 本 地 数据 的 存储 ， 首 先 需要 打开 或 创建 一 个 数据 库 。 打 开 或 创建 数据 库 
的 API 是 openDatabase， 其 调用 代码 如 下 。 

openDatabase(DBName,DBVersion,DBDescribe,DBSize, Callback()); 


参数 说 明 如 下 。 

回 DBName: 表示 数据 库 名 称 。 

DBVersion: 表示 版 本 号 。 

DBDescribe: 表示 对 数据 库 的 描述 。 

DBSize: 表示 数据 库 的 大 小 ， 单 位 为 字 节 ， 如 果 是 2MB， 必 须 写 成 2x1024x1024。 
Callback(: 表示 创建 或 打开 数据 库 成 功 后 执行 的 一 个 回调 函数 。 

调用 此 方法 时 ， 如 果 指 定 的 数据 库 名 存在 ， 则 打开 该 数据 库 ， 和 否则 ， 将 创建 一 个 指定 名 称 的 空 数 


[ral 
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实例 10-7: 使 用 openDatabase 打开 、 创 建 数据 库 
源码 路 径 光盘 :\codes\10\7.html 


实例 文件 7.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language="jscript" 
src-"Js/js7 js"/» 
</script> 
</head> 
<body> 
«input id="btnCreateDb" type="button" value=" 创 建 数据 库 " 
class-"inputbtn" onClick="btnCreateDb_Click();"> 
«input id-"btnTestConn" type="button" value=" 查 看 连接 " 
class="inputbtn" onClick="btnTestConn_Click();"> 
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<p id-"pStatus"»«/p» 

</body> 

编写 脚本 文件 js7.js， 首 先 定义 一 个 全 局 性 变量 db 来 保存 打开 的 数据 库 对 象 。 当 用 户 单 击 “ 创 建 
数据 库 ” 按钮 时 ， 调 用 自 定 义 函 数 btnCreateDb_Click0， 通 过 此 函数 创建 或 打开 一 个 名 为 Student 的 数 
据 库 对 象 ， 此 数据 对 象 的 版 本 号 为 1.0， 大 小 为 2MB。 如 果 创 建成 功 ， 则 执行 回调 函数 ， 并 在 回调 函 
数 中 显示 执行 成 功 的 提示 信息 。 当 单 击 “ 查 看 连接 ”按钮 时 ， 调 用 另外 一 个 自 定义 函数 btnTestConn 
Click0， 通 过 其 全 局 变量 db 的 状态 ， 显 示 与 数据 库 的 连接 是 否 正常 的 提示 信息 。 

执行 后 的 效果 如 图 10-12 所 示 。 
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10-12 ”执行 效果 
10.4.2 ”执行 事务 操作 


当 打 开 / 创 建 数据 库 后 , 接 下 来 可 以 使 用 数据 库 对 象 中 的 transaction() 方 法 执行 事务 处 理 。 每 一 个 事 
务 处 理 请 求 都 作为 数据 库 的 独立 操作 ， 这 可 以 有 效 地 避免 在 处 理 数据 时 发 生 冲突 。 具 体 调用 格式 如 下 。 


transaction(TransCallback,ErrorCallback,SuccessCallback); 


参数 说 明 如 下 。 

BI TransCallback: 表示 事务 回调 函数 ， 可 以 写 入 需要 执行 的 SQL 语句 。 
回 ErrorCallback: 表示 执行 SQL 语句 出 错时 的 回调 函数 。 

B] SuccessCallback: 表示 执行 SQL 语句 成 功 时 的 回调 函数 。 


| 实例 10-8: 执行 事务 操作 
源码 路 径 : 光盘 :\codes\10\8.html 


在 本 实例 的 页 面 中 ， 添 加 了 一 个 “执行 事务 ”按钮 ， 当 用 户 单 击 该 按钮 时 ， 执 行 一 条 新 建 名 为 表 
StuInfo 的 SQL 语句 ， 并 在 页 面 中 显示 执行 后 的 结果 。 实 例文 件 8html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src="js8.js"/> 
</script> 
</head> 
<body> 
«input id="btnCreateTrans" type="button" value=" 执 行事 务 " 
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class-"inputbtn" onClick-"btnCreateTrans Click();" 
«p id="pStatus"></p> 

</body> 

编写 脚本 文件 js8.js。 当 单 击 “ 执 行事 务 ” 按 钮 时 ， 调 用 自 定义 函数 btnCreateTransClick0。 此 函数 
先 使 用 方法 openDatabase0 打 开 / 创 建 一 个 名 为 Student 的 数据 库 ， 如 果 成 功 ( 即 数据 对 象 db 不 为 空 ) 
则 定义 一 个 SQL 语句 ， 通 过 字符 变量 strSQL 保存 。 该 SQL 语句 的 功能 是 ， 如 果 不 存在 ， 则 新 建 一 个 
名 为 StuInfo 的 表 ， 该 表 中 包含 4 个 字段 ,分 别 为 StuID、Name、Sex 和 Score。 其 中 ， 字 段 StuID 为 主 
键 , 不 允许 重复 ; 字段 Score 为 int 类 型 ; 其 他 两 个 字段 为 字符 型 。 然 后 使 用 方法 transaction0 执 行事 务 ， 
在 该 方法 的 第 一 个 参数 中 获取 变量 strSQL 的 值 ， 调 用 executeSq10 方 法 执行 对 应 的 SQL 语句 。 最 后 ， 
将 事务 执行 过 程 中 的 结果 ， 通 过 transaction0 方 法 中 第 二 个 与 第 三 个 回调 函数 显示 在 页 面 中 。 

执行 后 的 效果 如 图 10-13 所 示 。 
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图 10-13 ”执行 效果 
10.4.3. ”调用 执行 SQL 语句 


在 HTML 5 存储 中 , 可 以 通过 执行 相应 的 SQL 语句 在 新 建 的 表 中 插入 一 条 记录 。 插 入 记录 过 程 中 ， 
除了 要 调用 事务 方法 外 ， 还 要 调用 一 个 执行 SQL 语句 的 方法 executeSql0)， 具 体 调用 格式 如 下 。 
executeSql(strSQL,[Arguments],SuccessCallback,ErrorCallback); 


参数 说 明 如 下 。 

E] strSQL: 表示 需要 执行 的 SQL 语句 。 

回 Arguments: 表示 语句 需要 的 实 参 。 

回 SuccessCallback: 表示 SQL 语句 执行 成 功 时 的 回调 函数 。 

El ErorCallback: 表示 SQL 语句 执行 出 错时 的 回调 函数 。 

在 使 用 方法 executeSql0 执 行 SQL 语句 时 ， 人 允许 使 用 “? ”作为 语句 中 的 形 参 ， 与 形 参 相对 应 的 实 
参 放置 在 第 二 个 参数 Arguments 中 。 例 如 ， 下 面 的 语句 是 正确 的 。 


形 参 “? ”的 数量 必须 与 对 应 实 参 完全 一 致 ， 如 果 SQL 语句 中 没有 形 参 “? ”， 则 在 第 二 个 参数 
Arguments 中 不 允许 有 任何 出 错 内 容 ， 否 则 执行 SQL 语句 时 会 报错 。 
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C 实例 10-9: 调用 执行 SQL 语句 
NL. — M NE 源码 路 径 : 光盘 :codes\l09hml — — — — sss 

本 实例 的 功能 是 创建 一 个 用 于 输入 学 生 资料 信息 的 页 面 ， 用 户 可 以 在 页 面 中 输入 姓名 、 性 别 、 总 
分 ， 单 击 “ 提 交 ” 按 钮 后 ， 会 将 提交 的 数据 信息 通过 调用 方法 executeSql0 插 入 到 表 StuInfo 中 ， 并 将 
执行 结果 返回 显示 在 页 面 中 。 实 例文 件 9.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src="js9.js"/> 
</script> 
</head> 
<body onLoad="Init_Data();"> 
<p id="pStatus"></p> 
<fieldset> 
<legend> 新 增 学 生 资 料 </legend> 
«span class-"spanl" 
学 号 : «input type="text" readonly-"true" id-"txtStulD" 
class-"inputtxt" size="10"><br> 
姓名 : «input type="text" id-"txtName" class-"inputtxt" 
Size-"15"» 


</span> 
«span class="spanr"> 
性 别 : <select id="selSex"> 
<option value=" 男 "> 男 </option> 
<option value=" 女 "> 女 </option> 
</select><br> 
总 分 : «input type="text" id="txtScore" class-"inputtxt" 
Size="8"> 
</span> 
<p class="btn"> 
«input id="btnAdd" ="button" value=" 提 交 " 
class-"inputbtn" onClick="btnAdd_Click();"> 
«lp» 
</fieldset> 
</body> 


脚本 文件 js9jjs 中 ， 在 事务 处 理 过 程 中 调用 方法 executeSql0 执 行 编写 好 的 SQL 语句 。 在 执行 时 ， 
获取 在 页 面 中 输入 的 各 项 信息 值 作为 实 参 ， 传 递 给 SQL 语句 中 的 形 参 ， 从 而 实现 将 页 面 中 输入 的 数据 
插入 到 表 StuInfo 中 。 

执行 后 的 效果 如 图 10-14 所 示 。 
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105 ”实现 一 个 日 记 式 事务 提醒 系统 


£a 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 10 章 \ 实 现 一 个 日 记 式 事务 提醒 系统 .avi 

TE HTML 5 应 用 中 ,可 以 使 用 localStorage 对 象 的 setItem() 方 法 将 数据 永久 保存 在 客户 端 计算 机 中 ， 
并 且 按 照 “ 键 名 , 键 值 ”的 形式 进行 保存 。 将 第 一 个 参数 设置 为 键 名 ， 将 第 二 个 参数 设置 为 键 值 。 保 存 
时 不 允许 重复 保存 相同 的 键 名 。 保 存 后 可 以 修改 键 值 ， 但 不 允许 修改 键 名 《只 能 重新 取 键 名 ， 然 后 再 
保存 键 值 ) 。 


变量 = localStorage.getltem(key) 


使 用 localStorage 对 象 的 方法 getItem0 将 数据 读 取 到 变量 中 ， 将 参数 指定 为 键 名 ,返回 键 值 并 保存 
到 变量 中 。 

区 & | |! 实例 10-10: 开发 一 个 日 记 式 事务 提醒 系统 

AA .| 源码 路 径 : Def vodesio 0h O aoaaa ooa 

本 实例 的 功能 是 制作 一 个 HTML 5 版 本 的 日 记 式 事务 提醒 系统 。 当 打开 浏览 器 浏览 本 实例 网 页 时 ， 
在 日 记事 务 系统 中 显示 当天 日 期 和 用 户 在 当天 有 哪些 必须 要 处 理 的 事件 。 我 们 可 以 在 日 期 文本 框 中 使 
用 选择 的 方式 输入 其 他 日 期 ， 然 后 在 日 记事 务 系统 中 输入 选 定 日 期 所 要 处 理 的 事件 并 保存 。 这 样 当 用 
户 在 所 选择 的 日 期 打开 浏览 器 时 ， 浏 览 器 会 在 日 记 式 事务 提醒 系统 中 显示 在 该 日 要 处 理 的 事件 。 实 例 
文件 10.html 的 主要 代码 如 下 。 


«style» 
div{ 
-webkit-border-image: url(bg.png) 10; 
-moz-border-image: url(bg.png) 10; 
width:300px; 
height:300px; 
padding:35px; 
background:#eee; 
font-weight:bold; 


} 
li( 


) 

</style> 

«script type-"text/javascript" language="jscript" src="js10.js"/> 
</script> 

</head> 

«body onload="window_onload()"> 

<h1> 开 发 一 个 日 记 式 事务 提醒 系统 </h1> 

选择 日 期 : <input id="date1" type-"date" onchange="date_onchange()"><input type="button”value=" 保 存 " 
onclick="save()"/><br/> 

<div> 

本 日 日 期 : <span id="today"></span><br/> 


list-style:none; 
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本 日 要 事 : <br/> 

«ul contentEditable="true"> 
<liid="li1">( 没 有 记录 ) «lli» 
<liid="li2">( 没 有 记录 ) «lli» 
<liid="li3">( 没 有 记录 ) «lli» 
<lul> 

</div> 

</body> 


编写 脚本 文件 js10.js， 在 脚本 代码 的 开始 处 定义 了 脚本 代码 中 所 使 用 的 两 个 全 局 变量 ， 其 中 变量 
dateElement 表示 页 面 中 的 选择 日 期 文本 框 ， 变 量 today 表示 页 面 中 用 来 显示 当天 日 期 的 span 元 素 。 
执行 后 的 效果 如 图 10-15 所 示 。 
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图 10-15 执行 效果 


第 11 章 使 用 Web Sockets API 


Web Sockets API 是 HTML 5 提供 的 一 种 Web 应 用 通信 机 制 ， 通 过 这 种 机 制 可 实现 客户 端 与 服务 
器 端 之 间 进 行 的 非 HTTP 的 通信 功能 。 通过 使 用 Web Sockets API 技术 , 可 以 在 服务 器 与 客户 端 之 间 建 
立 一 个 非 HTTP 的 双向 连接 。 当 服务 器 想 向 客户 端 发 送 数据 时 ， 可 以 立即 将 数据 推送 到 客户 端的 浏览 
器 中 ， 无 须 重 新 建立 连接 。 只 要 客户 端 有 一 个 被 打开 的 socket ERF) 并 且 与 服务 器 建立 了 连接 ， 
服务 器 就 可 以 把 数据 推送 到 这 个 socket 上 ， 服 务 器 不 再 需要 轮 询 客户 端的 请 求 ， 从 被 动 转 为 主动 。 本 
章 将 详细 介绍 在 HTML 5 页 面 中 使 用 Web Sockets API 实现 通信 的 方法 , 并 通过 几 个 具体 实例 来 演示 具 
体 的 实现 流程 。 


11.1 安装 jWebSocket 服务 器 


Ga 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 11 章 \ 安 装 jWebSocket 服务 器 .avi 
为 了 提高 开发 效率 ， 出 现 了 以 Web Sockets 为 基础 开发 的 jWebSocket 框架 。jWebSocket 框架 是 一 
个 成 熟 的 、 可 以 用 来 实现 Socket 通信 的 框架 ， 可 以 直接 使 用 它 所 提供 的 服务 器 插件 及 API 来 开发 强大 
的 实现 Socket 通信 的 Web 应 用 程序 。jWebSocket 服务 器 是 基于 纯 Java 技术 建立 起 来 的 ， 因 此 在 运行 
jWebSocket 服务 器 时 一 定 要 确保 已 经 安装 了 Java Runtime Environment (JRE) 1.6 或 者 更 高 版 本 ， 并 且 
设置 好 Java 一 HOME 环境 变量 并 将 其 指向 Java 的 安装 路 径 。 在 Windows 操作 系统 中 ， 推 荐 在 PATH 
环境 变量 中 添加 java.exe 文件 所 在 的 路 径 ， 否 则 需要 调整 安装 包 内 提供 的 启动 jWebSocket 服务 器 时 所 
使 用 的 批 处 理 文件 。 另外 , 设置 JWEBSOCKET 一 HOME 环境 变量 并 将 其 指向 jWebSocket 的 安装 路 径 。 
安装 jWebSocket 服务 器 的 具体 步骤 如 下 。 
(1) 下 载 jWebSocket 服务 器 安装 包 〈jWebSocketServer-< 版 本 号 >.zip) 。 
该 压缩 文件 中 包括 jWebSocketServer-< 版 本 号 >.jar 文件 、 所 有 运行 jWebSocket 服务 器 时 所 必需 的 
库 文件 以 及 jWebSocketServer-< 版 本 号 >.bat 批 处 理 文件 。 
(2) 解压 安装 包 。 
解压 后 的 路 径 中 包括 jWebSocketServer-< 版 本 号 > 目录 ， 该 目录 就 是 jWebSocket 服务 器 的 根 目录 ， 
在 此 目录 下 包括 如 下 4 个 子 目录 。 
回 cof HR: 包含 一 个 用 于 对 jwWebSocket 服务 器 进行 配置 的 jWebSocketxml 文件 。 
回 Libs 子 目录 :包含 jWebSocketServerjar 文件 与 所 有 运行 jWebSocket 服务 器 时 所 必需 的 库 文件 。 
利用 插件 或 过 滤器 对 jWebSocket 进行 扩展 时 所 需要 的 jar 文件 也 必须 放 在 该 目录 下 。 
回 bin FHR: 包含 所 有 的 Windows 可 执行 文件 、 作 为 Windows 服务 被 使 用 时 的 文件 、 启 动 
jWebSocket 服务 器 时 所 需要 使 用 的 批 处 理 文件 以 及 安装 与 卸载 Windows 的 32 位 或 64 位 服务 
时 所 需要 使 用 的 文件 。 
Ei Log THR: 包含 作为 日 志 来 使 用 的 jWebSocketlog 日 志文 件 。 
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(3) WE TWEBSOCKET—HOME 环境 变量 并 将 其 指向 jWebSocket 的 根 目 录 : jWebSocketServer- 
< 版 本 号 > 目录 。 

(4) 在 Windows 操作 系统 中 ,运行 bin 目录 下 的 批 处 理 文件 jWebSocketServerbat。 同 时 在 bin H 
KF, X Mac OS X 操作 系统 提供 了 一 个 jWebSocketServer.command 脚本 文件 ， 为 ubuntu 操作 系统 提 
供 了 一 个 jWebSocketServer.sh 文件 。 如 果 PATH 环境 变量 中 没有 包括 java.exe 文件 所 在 的 路 径 ， 需 要 
手工 修改 jWebSocketServer.bat 以 使 其 能 够 找到 java.exe 文件 。 

(5) 如 果 想 在 所 有 操作 系统 中 手动 地 采用 统一 方法 来 启动 jWebSocket 服务 器 ， 在 命令 行 中 输入 
java -jar bin/jWebSocketServer-<version>.jar 即 可 启动 服务 器 。 

在 运行 jWebSocket 服务 器 时 ， 可 以 在 命令 行 中 添加 一 个 “-config <jWebSocket 服务 的 配置 文件 的 
路 径 >” 参 数 ， 这 样 可 以 在 该 参数 中 手动 指定 运行 jWebSocket 服务 器 时 使 用 的 配置 文件 及 其 路 径 ， 而 
不 使 用 默认 的 配置 文件 。 在 为 了 测试 目的 而 同时 运行 几 个 jwWebSocket 服务 器 并 为 每 个 服务 器 指定 不 同 
的 配置 文件 时 ， 该 命令 行 参 数 是 十 分 有 用 的 。 
注意 : 其 实在 安装 jWebSocket 服 务 器 后 ， 还 是 不 能 使 用 jWebSocket 框 架 。 为 了 方便 地 在 不 同 编程 环境 下 

开发 jWebSocket 项 目 , 接 下 来 需要 掌握 在 不 同 开发 环境 运行 jWebSocket 服 务 器 的 知识 。 至 于 什么 
开发 环境 , 读者 可 以 根据 自己 的 具体 情况 进行 。 并 且 还 需要 将 jWebSocket 服 务 器 设置 为 Windows 
服务 ， 并 且 需 要 在 客户 端 进行 设置 。 因 为 读者 的 操作 系统 不 同 ， 开 发 环境 不 同 ， 所 以 在 本 书 中 
不 再 讲解 上 述 相关 内 容 。 


11.2 ”实现 跨 文档 传输 数据 
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在 JavaScript 脚本 程序 中 ， 出 于 对 代码 安全 性 的 考虑 ， 不 允许 跨 域 访问 其 他 页 面 中 的 元 素 ， 这 给 不 
区 域 的 页 面 数 据 互 访 带 来 障碍 。 在 全 新 的 HTML 5 中 ， 可 以 利用 对 象 的 postMessage() 方 法 ， 在 两 个 
同 域名 与 端口 的 页 面 之 间 实 现 数据 的 接收 与 发 送 功能 。 有 具体 调用 格式 如 下 。 


otherWindow.postMessage(message,targetOrigin) 


参数 说 明 如 下 。 

El otherWindow: 数据 接收 数据 页 面 的 引用 对 象 , 可 以 是 window.open 的 返回 值 , 也 可 以 是 iframe 
的 contentWindow 属性 ， 或 通过 下 标 返 回 的 window .frames 单个 实体 对 象 。 

E] message: 表示 所 有 发 送 的 数据 、 字 符 类 型 ， 也 可 以 是 JSON 对 象 转换 后 的 字符 内 容 。 

E] targetOrigin: 表示 发 送 数据 的 URL 来 源 ， 用 于 限制 otherWindow 对 象 的 接收 范围 ， 如 果 该 值 
为 通配符 号 〈t)， 则 表示 不 限制 发 送 来 源 ， 指 向 全 部 的 地 址 。 


C 实例 11-1: 在 网 页 中 实现 跨 文 档 传输 数据 
源码 路 径 : 光盘 :\codes\11\I.html 


本 实例 演示 了 使 用 postMessage0 方 法 实现 跨 文档 传输 数据 的 过 程 .在 本 实例 中 创建 了 一 个 HIML 5 
页 面 ， 并 在 页 面 中 添加 一 个 < 过 ame> 标 记 作为 子 页 面 。 当 在 主页 面 的 文本 框 中 输入 生成 随机 数 的 位 数 ， 
并 单 击 “ 请 求 ” 按 钮 后 ， 子 页 面 将 接收 该 位 数 信息 ， 并 向 主页 面 返回 根据 该 位 数 生成 的 随机 数 。 主 页 


3 


第 11 章 使 用 Web Sockets AP 


面 能 够 接收 指定 位 数 的 随机 数 ， 并 将 随机 数 显示 在 页 面 中 ， 从 而 完成 在 不 同文 档 间 数 据 的 互 访 功能 。 
实例 文件 1.html 的 主要 代码 如 下 。 


<link href-"css.css" rel="stylesheet" type="text/css"> 
«script type-"text/javascript" language-"jscript" 
src="js1.js"/> 
</script> 
</head> 
<body onLoad="pageload();"> 
<fieldset> 
<legend> 跨 文档 请 求 数据 </legend> 
<p id="pStatus"></p> 
<input id="txtNum" type="text" class="inputtxt"> 
«input id="btnAdd" type="button" value=" 请 求 " 
class="inputbtn" onClick="btnSend_Click();"> 
«iframe id="ifrA" src="Message.html" 
width="0px" height-"Opx" frameborder="0"/> 


</fieldset> 
</body> 


脚本 文件 jslijs 的 主要 代码 如 下 。 


function $$(id) ( 
return document.getElementByld(id); 
) 


var strOrigin = "http://localhost"; 
// 自 定义 页 面 加 载 函数 
function pageload(){ 
window.addEventListener( message'， 
function(event) ( 
if (event.origin == strOrigin) ( 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML += event.data; 
) 


) 
false); 


} 
// 单 击 “ 请 求 ”按钮 时 调用 的 函数 
function btnSend_Click() { 
// 获 取 发 送 内 容 
var strTxtValue = $$("txtNum").value; 
if (strTxtValue.length > 0) ( 
var targetOrigin 7 strOrigin; 
S$$("ifrA").contentWindow.postMessage(strTxtValue, targetOrigin); 
S$$("txtNum").value = ""; 


} 
然后 通过 <iframe> 元 素 的 sre 属性 导入 一 个 名 称 为 Message.html 的 子 页 面 ， 功 能 是 接收 主页 面 请 求 
生成 随机 数 长 度 的 值 ， 并 返回 根据 该 值 生成 的 随机 数 。 文 件 Message.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src-'js162 js" 
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</script> 

</head> 

<body onLoad="PageLoadForMessage();"> 

</body> 

在 本 实例 的 上 述 代码 中 ， 为 了 接收 页 面 间 传 输 的 数据 ， 主 、 子 页 面 在 页 面 加 载 时 都 为 页 面 添加 了 
message 事件 ， 添 加 方式 如 下 。 


window.addEventListener( 'message.function (event) (...).false); 


如 果 在 页 面 中 添加 message 事件 成 功 ， 那 么 通过 postMessage() 方 法 向 页 面 发 送 数据 请 求 时 会 触发 
该 事件 ， 并 通过 事件 回调 函数 中 event 对 象 的 data 属性 捕获 发 送 来 的 数据 。 在 本 实例 中 ， 将 捕获 的 数 
据 event.data 传递 给 另外 一 个 自 定 义 函数 RetRndNum0， 此 函数 的 功能 是 生成 随机 数 。 另 外 ，event 对 
象 中 还 包含 source 与 origin 属性 ， 分 别 代表 发 送 有 
数据 对 象 与 发 送 来 源 ， 可 以 使 用 source 属性 向 发 MI rers Ja Mrosteszaze OR. | ^ 
送 数 据 页 面 返回 数据 ; 同时 ， 还 可 以 通过 origin € > 2 o [T 本 地 1dwsuE/ k) [E] 8/851 
属性 检测 互通 数据 的 域名 是 否 正确 ， 以 规避 因 域 FREE 
名 不 正确 产生 的 恶意 代码 来 源 ， 确 保 数据 交互 的 [ 
安全 性 。 在 本 实例 中 , 主子 页 面 通过 eventorigin 一 
strOrigin 代码 , 判断 各 自 请 求 来 源 是 否 为 约定 的 
strOrigin 值 。 如 果 是 则 进行 下 面 的 操作 ， 否 则 不 进 CEE a 
行 任何 的 数据 交互 操作 。 执行 效果 如 图 11-1 所 示 。 图 11-1 执行 效果 
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在 HTML 5 中 ，WebSocket 为 客户 端 与 服务 器 端 拱 起 了 一 座 双向 通信 的 桥梁 ， 实 现 了 服务 器 端 信 
息 的 推送 功能 。 这 座 桥梁 是 一 个 实时 、 永 久 性 的 连接 ， 服 务 器 端 一 旦 与 客户 端 建立 了 这 样 的 双向 连接 ， 
就 可 以 将 数据 推送 至 Socket 中 。 而 客户 端 只 要 有 一 个 Socket 绑 定 的 地 址 和 端口 与 服务 器 建立 联系 ， 就 
可 以 接收 推送 来 的 数据 。 


11.3.1 使 用 Web Sockets API 的 方法 
使 用 Web Sockets API 的 方法 十 分 简单 ， 基 本 步骤 如 下 。 
(OD 创建 连接 。 新 建 一 个 WebSocket 对 象 的 方法 十 分 方便 ， 具 体 代码 如 下 。 
var objns=new WebSocket("ws;//localhost:3131/test/demo"); 


其 中 ，URL 必须 以 ws 字符 开头 ， 剩 余部 分 可 以 像 使 用 HTTP 地 址 一 样 来 编写 。 该 地 址 没有 使 用 
HTTP， 因 为 它 的 属性 为 WebSocket URL: URL 必须 由 4 个 部 分 组 成 ， 分 别 是 通信 标记 Cws) 、 主 机 
名 称 Chost) 、 端 口号 (port) 及 Web Sockets Server. 

(2) 发 送 数据 。 当 WebSocket 对 象 与 服务 器 建立 联系 后 ， 使 用 如 下 代码 发 送 数据 。 
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objns.send(datalnfo); 


其 中 ，objns 为 新 创建 的 WebSocket 对 象 ，send0 方 法 中 的 dataInfo 参数 为 字符 类 型 ， 即 只 能 使 用 
文本 数据 或 者 将 JSON 对 象 转换 成 文本 内 容 的 数据 格式 。 
(0 接收 数据 。 客 户 端 添 加 事件 机 制 用 于 接收 服务 器 发 送 来 的 数据 ， 代 码 如 下 。 
objns.onmessage-function(event)( 
alert (event.data) 
) 


其 中 ， 通 过 回调 函数 中 event 对 象 的 data 属性 来 获取 服务 器 端 发 送 的 数据 内 容 ， 该 内 容 可 以 是 一 
个 字符 串 或 者 JSON 对 象 。 

(4) 设置 状态 标志 。 通 过 WebSocket 对 象 的 readyState 属性 记录 连接 过 程 中 的 状态 值 。 属 性 
readyState 是 一 个 连接 的 状态 标志 ， 用 于 获取 WebSocket 对 象 在 连接 、 打 开 、 关 闭 中 和 关闭 时 的 状态 。 


11.3.2 ”实战 演练 


区 实例 11-2: 在 网 页 中 使 用 WebSocket 传送 数据 
e 源码 路 径 : 光盘 :\codes\ll\2 .html 


在 本 实例 中 新 建 了 一 个 HTML 页 面 ， 当 用 户 在 文本 框 中 输入 发 送 内 容 并 单 击 “ 发 送 ”按钮 后 ， 通 
过 创建 的 WebSocket 对 象 将 内 容 发 送 至 服务 器 端 ， 同 时 页 面 接收 服务 器 端 返 回来 的 数据 ， 并 展示 在 页 
面 的 <textarea> 元 素 中 。 
实例 文件 2.html 的 主要 代码 如 下 。 
«script type-"text/javascript" language-"jscript" 
src-"js2 js" 
</script> 
</head> 
<body onLoad="pageload();"> 
<textarea id="txtaList" cols="26" rows="12" 
readonly="true"></textarea><br> 
<input id="txtMessage" type="text" class="inputtxt"> 
«input id="btnAdd" type="button" value=" Z 3X" 
class="inputbtn" onClick="btnSend_Click():"> 
</body> 
编写 脚本 文件 js2.js， 设 置 当 页 面 加 载 onLoad 事件 时 调用 自 定义 函数 pageload0。 在 该 函数 中 ， 首 
先 根 据 变 量 SocketCreated 与 readyState 属性 的 值 ， 检 测 是 否 还 存在 没有 关闭 的 连接 ， 如 果 存 在 则 调用 
WebSocket 对 象 的 close() 方 法 进行 关闭 。 然 后 使 用 try 语句 通过 新 创建 的 WebSocket 对 象 与 服务 器 请 求 
连接 ,如 果 连 接 成 功 则 将 变量 SocketCreated 赋值 为 rue， 否则 执行 catch. 部 分 代码 ， 将 错误 显示 在 页 面 
的 <textarea> 元 素 中 。 为 了 能 实时 捕 提 与 服务 器 端 连接 的 各 种 状态 ， 在 函数 pageload0 中 自 定 义 了 
WebSocket 对 象 的 打开 Copen) 、 接 收 数据 (message) 、 关 闭 连接 (close) 、 连 接 出 错 Cerro). 事件 ， 
一 旦 触发 这 些 事件 ， 都 将 获取 的 数据 显示 在 <textarea> 元 素 中 。 当 单 击 “ 发 送 ”按钮 时 ， 先 检测 发 送 的 
内 容 是 否 为 空 ， 再 调用 WebSocket 对 象 的 send0 方 法 ， 将 获取 的 数据 发 送 至 服务 器 端 。 
执行 效果 如 图 11-2 所 示 。 
© 
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11-2 执行 效果 


注意 : 要 想 实现 客户 端 与 服务 器 端的 连接 并 且 双 方 互通 数据 ， 首 要 条 件 是 需要 在 服务 器 端 进行 一 些 系 
统 的 配置 ， 并 使 用 服务 器 端 代码 编写 程序 支持 客户 端的 请 求 。 
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在 HTML 5 网 页 中 ， 客 户 端 能 够 发 送 与 接收 JSON 对 象 。 但 是 ， 在 发 送 与 接收 过 程 中 需要 借助 
JavaScript 中 的 两 个 方法 : JSON.parse 和 JSON.stringify， 前 者 用 于 将 文本 数据 转换 成 JSON 对 象 ， 后 者 
用 于 将 JSON 对 象 转换 成 文本 数据 。 由 于 WebScoket 对 象 的 send() 方 法 只 能 接收 字符 型 的 数据 ， 因 此 ， 
在 发 送 时 需要 将 JSON 对 象 转换 成 文本 数据 ， 在 接收 过 程 中 再 将 服务 器 推送 的 文本 数据 转换 成 JSON 

区 < | 实例 11-3: 在 网 页 中 传送 JSON 对 象 

M... h.l. 源码 路 径 : 光盘 :codes\ll3htm ————000000000 suu 

本 实例 以 实例 11-2 为 基础 , 新 添加 了 一 个 <textarea> 元 素 , 用 于 显示 从 服务 器 接收 的 在 线 人 员 数 据 。 
用 户 输入 发 送 内 容 并 单 击 “ 发 送 ”按钮 后 ， 将 使 用 JSON 对 象 的 形式 向 服务 器 端 发 送 输入 的 发 送 内 容 
与 时 间 。 实 例文 件 3.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src="js3.js"/> 
</script> 
</head> 
«body onLoad="pageload();"> 
<fieldset> 
<legend> 用 JSON 对 象 传输 数据 </legend> 
<div> 
<span><b> 对 话 记 录 </b></span> 
<span class="pl140"> 
<b> 在 线 人 员 </b> 
</span> 
</div> 
<textarea id-"txtaL ist" cols="26" rows="12" 
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readonly-"true"» «/textarea^ 
*textarea id-"txtaUser" cols-"10" rows-"12" 
readonly-"true"» «/textarea^ 
<div class-"pl2"» 
«input id-"txtMessage" type="text" class-"inputtxt w176"> 
«input id-"btnAdd" type="button" value-" z 3" 
class-"inputbtn w85 ml4" onClick-"btnSend Click();" 
</div> 
</fieldset> 
</body> 
编写 脚本 文件 js3js， 此 文件 与 实例 11-2 中 的 脚本 文件 基本 相同 ， 但 是 两 段 代码 也 存在 明显 差别 ， 
分 别 是 发 送 客户 端 数据 与 接收 服务 器 推送 来 的 数据 处 理 方式 。 在 本 实例 中 ， 为 了 能 够 向 服务 器 端 发 送 输 
入 内 容 与 对 应 时 间 ， 需 要 将 获取 的 内 容 变 量 stiTxtMessage 与 当前 时 间 strTime.toLocaleTimeString0， 通 
过 调用 JSON.stringify 方法 转换 成 文本 数据 , 再 调用 send0 方 法 向 服务 器 端 发 送 数 据 。 在 本 实例 的 message 
事件 中 ， 为 了 更 好 地 接收 服务 器 端 推送 来 的 数据 ， 先 调用 JSON.parse 方法 将 获取 的 event.data 数据 转 
换 成 JSON 对 象 , 再 通过 遍历 对 象 元 素 的 方法 , 将 接收 的 全 部 数据 信息 展示 在 对 应 的 <textarea> 元 素 中 。 
执行 效果 如 图 11-3 所 示 。 
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对 话 记录 在 线 人 员 


图 11-3 执行 效果 
11.5 jWebSocket 框架 
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jWebSocket 是 一 个 安全 、 可 靠 、 快 速 的 纯 Web 的 Java/JavaScript 高 速 双向 通信 和 解决 方案 。 我 们 可 
以 通过 jWebSocket 创建 基于 HTML 5 的 流 媒体 和 通信 Web 应 用 程序 。HTML 5 WebSockets 是 一 种 超 
高 速 双向 TCP 套 接 字 通信 技术 , 是 实现 HTML 5 上 的 WebSocket 功能 的 Java 和 JavaScript 的 开源 框架 。 
本 节 将 详细 讲解 在 HTML 5 中 使 用 jWebSocket 框架 的 基本 知识 。 


11.5.1 ”使 用 jWebSocketTest 框架 进行 通信 


jWebSocket 包含 jWebSocket Server、jWebSocket Clients fil jWebSocket FlashBridge。 具 体 说 明 
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如 下 。 
E] jWebSocket Server: 基于 Java 的 WebSocket 服务 器 ， 用 于 server-to-client (S2C) 客户 端 到 服 
务 器 的 流 媒 体 解 决 方案 和 服务 器 控制 client-to-client (C2C) 客户 端 到 客户 端的 通信 。 


回 jWebSocket Clients: 纯 JavaScript 的 WebSocket 客户 端 ， 多 个 子 协议 和 可 选 的 用 户 、session、 
timeout 管理 机 制 ， 无 须 插 件 ， 并 且 现 在 可 以 应 用 在 任何 其 他 Java、Android 客户 端 。 

回 jWebSocketFlashBridge: 基于 Flash 的 WebSocket 插件 的 跨 浏 览 器 兼容 性 。 告诉 双向 所 有 浏览 
器 双向 通信 。 


f 服务 器 端 之 间 的 通信 状况 进 
行 简要 说 明 。 在 HTML 5 页 面 中 利用 jWebSocket 框架 进行 Socket 通信 ， 需 要 在 客户 端 建立 一 个 与 
jWebSocket 服务 器 之 间 的 连接 。 建 立 连接 之 后 ， 客 户 端 可 以 向 jWebSocket 服务 器 端 或 向 其 他 所 有 与 
jWebSocket 服务 器 建立 连接 的 客户 端 发 送 消 息 。 相 反 地 ， 服 务 器 端 也 可 以 通过 同一 个 连接 (客户 端 与 
服务 器 端的 连接 ) 向 客户 端 发 送 消息 。 除 非 客户 端 或 服务 器 端 显 式 关闭 连接 ， 否 则 任何 一 方 都 可 以 向 
另 一 方 发 送 任何 消息 。 

实例 文件 hello_world.html 的 主要 代码 如 下 。 


«script type-"text/javascript" src="jWebSocket.js"></script> 
«script type-"text/javascript" src-"samplesPlugln.js"» «/script» 
«script type-"text/javascript" language-"JavaScript" 
var jWebSocketcClient; 
var userName; 
function window onload() 
{ 
if( jws.browserSupportsWebSockets() ) ( 
jWebSocketClient = new jws.jWebSocketJSONClient(); 
jWebSocketClient.setSamplesCallbacks(([OnSamplesServerTime:getServerTimeCallback]); 
document.getElementByld("btnConnect").disabled-"": 
} 
else { 
var IMsg = jws.MSG_WS_NOT_SUPPORTED; 
alert( IMsg ); 
) 


} 

function btnConnect_click() 

d 
var IURL = jws.JWS SERVER URL; 
userName = document.getElementByld("userName").value; 
var userPass = document.getElementByld("userPass").value; 
var msg=document.getElementByld("msg"); 
msg.innerHTML=" 连 接 到 地 址 : "+IURL +" 并且 以 \" + userName + "用 户 名 与 服务 器 建立 连接 .…" ; 
var IRes = jWebSocketClient.logon(IURL,userName,userPass, { 

OnOpen: function( aEvent ) ( 
msg.innerHTML-&-"«br/»jWebSocket 连接 已 建立 " ; 
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OnMessage: function( aEvent, aToken ) { 
msg.innerHTML«-"«br/»jWebSocket Y" + aTokentype + "" 令 牌 收 到 ,消息 字符 串 为 : \"” + 
aEvent.data + "'" ; 
i 
OnClose: function( aEvent ) ( 
msg.innerHTML-*-"«br/»jWebSocket 连接 被 关闭 ." ; 
document.getElementByld("btnbroadcastText").disabled-"disabled"; 
document.getElementByld("btnDisConnect").disabled-"disabled"; 
document.getElementByld("btnTestPlugln").disabled-"disabled"; 
5 
» 
msg.innerHTML*-"«br/»"*jWebSocketClient.resultToString(IRes); 
if(IRes.code--0) 
{ 
document.getElementByld("btnbroadcastText").disabled-"": 
document.getElementByld("btnDisConnect").disabled-"" 
document.getElementByld("btnTestPlugln").disabled-""; 
) 
) 
function btnbroadcastText click() 
( 
var sendMsg-document.getElementByld("sendMsg").value; 
var msg-document.getElementByld("msg"); 
msg.innerHTML+="<br/> 广 播 消息 : \"+sendMsg+"\"..."; 
var IRes = jWebSocketClient.broadcastText("",sendMsg); 
if(IRes.code!-0) 
msg.innerHTML-jWebSocketClient.resultToString( IRes ); 
document.getElementByld("sendMsg").value-"": 
} 
function btnDisConnect_click() 
ifIWebSocketClient) 
{ 
var msg-document.getElementByld("msg"); 
msg.innerHTML+="<br/> 用 户 "+"\"+userName+"\" 关 闭 连接 "; 
var IRes-jWebSocketClient.close(); 
msg.innerHTML-"«br/»"*jWebSocketClient.resultToString( IRes ); 
if(IRes.code--0) 
{ 
document.getElementByld("btnbroadcastText").disabled-"disabled"; 
document.getElementByld("btnDisConnect").disabled-"disabled"; 
document.getElementByld("btnTestPlugln").disabled-"disabled"; 


) 

) 

function btnTestPlugIn click() 

i 
var msg-document.getElementByld("msg"); 
msg.innerHTML+="<br/> 通 过 WebSockets 获取 服务 器 的 系统 时 间 .…" ; 
var IRes = jWebSocketClient.requestServerTime(); 
/发 生 错 误 时 显示 错误 消息 
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if( IRes.code != 0 ) 


msg.innerHTML*-"«br/»"*jWebSocketClient.result 'oString(IRes); 


} 

function getServerTimeCallback( aToken ) { 
msg.innerHTML+="<br/> 服 务 器 的 系统 时 间 : " + aToken.time ; 

) 

function window onunload() 


( 
if(jWebSocketClient) 


jWebSocketClient.close((timeout:3000]); 
) 
} 


</script> 
<body onload-"window onload()" onunload="window_onunload()"> 
用 &nbsp; 户 &nbsp;&nbsp; 名 : «input type="text" id="userName"><br/> 


密 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码 : «input type="text" id="userPass"><br/> 


发 送 消息 : «input type="text" id="sendMsg"><br/> 


«input type="button" id-"btnConnect" onclick="btnConnect_click()" value=" 建 立 连 接 " disabled="disabled"> 
«input type="button" id-"btnbroadcastText" onclick="btnbroadcastText_click()”value=" 广 播 消息 ”disabled= 


"disabled"> 


«input type-"button" id="btnDisConnect” onclick="btnDisConnect_click()”value=" 关闭 连接 ”disabled= 


"disabled"> 


«input type="button" id-"btnTestPlugln" onclick-"btnTestPlugln click()" value=" 测 试 插件 " disabled="disabled"> 


<div id="msg"> 
</body> 


要 在 页 面 中 使 用 jWebSocket 插 件 进 行 Socket 


[ese ce or i 
通信 ， 需 要 在 页 面 中 加 入 对 jWebSocketjs 文件 388 8&0 x$m OR F 


jx] 


boen | eso < [imus va soea [ 


或 jWebSocket_min.js 的 引用 。 接 下 来 需要 在 页 E anm 


e||&l-8* Phal aliel 


面 脚本 代码 的 开头 处 定义 两 个 全 局 变量 ， 其 中 aean 7 


a 1 S bs E B. pej 
变量 jWebSocketClient 代表 在 jWebSocket 中 使 H eir 
用 的 一 个 jWebSocketjSONClient 类 的 对 象 ， mxe| OSAS] xime | ees] 


jWebSocketjSONClient 类 的 命名 空间 为 jws。 
jWebSocketjSONClient 类 提供 了 通过 JSON D) 
议 来 建立 和 关闭 客户 端 与 jWebSocket 服务 器 端 
的 连接 以 及 互相 发 送 消息 的 方法 。 全 局 变量 
userName 则 代表 了 用 户 登 录 到 jWebSocket 服务 
器 中 时 所 使 用 的 用 户 名 。 执 行 后 的 效果 如 图 11-4 
所 示 。 


11.5.2 ”使 用 jWebSocketTest 开发 一 个 聊天 系统 


图 11-4 执行 效果 


在 下 面 的 实例 中 ， 通 过 一 个 利用 jWebSocket 服务 器 创建 简单 聊天 室 的 案例 ， 进 一 步 展 示 如 何 用 
jWebSocket 服务 器 进行 通信 。 在 此 页 面 中 有 一 个 聊天 室 ， 用 户 可 以 在 输入 用 户 名 后 单 击 “ 登 录 ” 按 钮 ， 
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登录 聊天 服务 器 ， 然 后 与 其 他 已 登录 聊天 服务 器 的 用 户 进行 文字 聊天 。 在 页 面 中 还 显示 一 个 用 户 列 表 ， 
当 用 户 登 录 或 退出 聊天 室 时 随时 更 新 用 户 列表 ， 显 示 当 前 登录 到 聊天 室 中 的 所 有 用 户 的 用 户 名 +“@”+ 
该 用 户 的 客户 端 id。 


实例 文件 chathtml 的 主要 代码 如 下 。 


«script src-"jWebSocket.js" type="text/javascript"></script> 
«script type-"text/javascript"» 
var jWebSocketcClient; 
var divChat,tbxUsername,tbxMsg,userName; 
var IN-0,OUT-1; 
var SYS=" 系 统 消息 "; 
function window_onload() 
{ 
divChat-document.getElementByld("divchat"); 
tbxUsername-document.getElementByld("tbxUsername"); 
tbxMsg-document.getElementByld("tbxMsg"); 
if(jws.browserSupportsWebSockets()) 
ü 
jWebSocketClient = new jws.jWebSocketJSONClient(); 
tbxUsername-focus(); 
tbxUsername.select(); 
ji 
else 
{ 
document.getElementByld("btnSend").disabled="disabled"; 
document.getElementByld("btnLogin").disabled="disabled"; 
document.getElementByld("btnLogout").disabled="disabled"; 
var IMsg = jws.MSG_WS_NOT_SUPPORTED; 
alert( IMsg ); 
log(SYS, IN, IMsg ); 
n 
} 
function log(username,event,string ) ( 
var IFlag; 
if(event--IN) 
IFlag = "<"; 
else 
IFlag = ">"; 
if(lusername) 
username = jWebSocketClient.getUsername(); 
// 如 果 用 户 没 有 登录 ， 则 设置 username 为 默认 用 户 名 
if( username ) 
username = "游客 "; 
divChat.innerHTML*-username + "" «Flag + " " *string + "<br>"; 
if( divChat.scrollHeight > divChat.clientHeight ) 
divChat.scrollTop = divChat.scrollHeight - divChat.clientHeight; 
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function btnLogin_onclick() 

{ 
liyar IURL = jws.JWS_SERVER_URL + "/;,timeout=360000"; 
var IURL = jws.JWS_SERVER_URL + "/;,timeout=5000"; 
var clientArray; 
if(tbxUsername.value.trim()=="") 


alert(" 请 输入 用 户 名 "); 
return; 


D» 
log( SYS, OUT, "连接 到 jWebSocket 聊天 服务 器 ， 地 址 为 : " + IURL + "..." ); 
var IRes-jWebSocketClient.logon(IURL,tbxUsername.value, "", ( 
OnOpen: function(aEvent)( 
log(SYS,IN,"5 jWebSocket 聊天 服务 器 的 连接 已 建立 ."); 
liyar options={}; 
var options=new Object(); 
options.immediate-false; 
options.interval = 3000; 
jWebSocketClient.startKeepAlive(options); 


) 
OnMessage: function( aEvent, aToken ) ( 
if(aToken) 
{ 
if(aToken.type == "response") 
{ 
if(aToken.reqType == "login") 
{ 
if( aToken.code == 0 ) 
log(SYS, IN, "欢迎 FB P?" + aToken.username+" 进 入 聊天 室 " ); 
jWebSocketClient.getAuthClients({pool: null}); 
} 
else 
log(SYS, IN, "登录 失败 ， 错 误 消息 为 : " + aToken.msg ); 
) 
else if(aToken.reqType == "getClients") 
{ 
var divRight-document.getElementByld("divRight"); 
divRight.innerHTML=" 用 户 列表 (@ 之 后 的 文字 为 用 户 的 客户 端 id):"; 
for(var i=0;i<aToken.clients.length;i++) 
t 
divRight.innerHTML--"«br/»"*aToken.clients[i]; 
} 
) 
) 


else if(aToken.type == "goodBye") 
log(SYS,IN,"WebSocket 聊天 服务 器 断 开 与 客户 端的 连接 (原因 : " + aToken.reason + ")" ); 
else if(aToken.type == "broadcast") 


{ 
if(aToken.data) 
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log( aToken.sender,IN,aToken.data); 
} 
else if(aToken.type == "event") 
t 
jWebSocketClient. getAuthClients((pool: null)); 
var data-JSON.parse(aEvent.data); 
if(data.name--"login") 


log(SYS, IN, "欢迎 FH P?" + data.username+" 进 入 聊天 室 " ); 


} 
if(data.name--"logout") 


log(SYS, IN, "Fi P:" + data.username* 5B HEX E" ); 


) 
) 


OnClose:function(aEvent)( 
log(SYS,IN,"5; jWebSocket 聊天 服务 器 的 连接 已 关闭 ."); 
document.getElementByld("btnSend").disabled-"disabled"; 
document.getElementByld("btnLogout").disabled-"disabled"; 
jWebSocketClient.stopKeepAlive(); 


) 
D: 
if(IRes.code==0) 
{ 
userName=tbxUsername.value; 
document.getElementByld("btnSend").disabled=""; 
document.getElementByld("btnLogout").disabled=""; 
) 
} 
function btnSend_onclick() 
( 
var msg = tbxMsg.value; 
if(msg.length > 0) 
{ 
log(userName,OUT.,msg9); 
var IRes = jWebSocketClient.broadcastText("" msg); 
if(IRes.code!-0) 
log(SYS,OUT,IRes.msg); 
tbxMsg.value-"": 
) 
) 
function btnLogout onclick() 
t 
var IRes = jWebSocketcClient.close(); 
log(SYS, OUT, "用 户 "+userName+" 退 出 聊天 室 : "+ IRes.msg ); 
if(IRes.code--0) 
{ 
document.getElementByld("btnSend").disabled-"disabled"; 
document.getElementByld("btnLogout").disabled-"disabled"; 
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) 
} 
function window onunload() 
f 
if(document.getElementByld("btnSend").disabled--"") 
jWebSocketClient.close(); 


} 
</script> 
<body onload-"window onload()" onunload-"window onunload()" 
<h1>jWebSocket 聊天 室 </h1> 
«div id="divContainer1"> 
<table id-"tbDlg" border-"0" cellpadding-"3" cellspacing-"0" width="100%"> 
«tr id-"trDlg"»- 
«td id-"tdDlg" width="5"> 
用 户 名 : &nbsp; 
«input id-"tbxUsername" type="text" value=" 游 客 " size="20"> 
«input id="btnLogin" type="button" value=" 登 录 " onclick="btnLogin_onclick();"> 
«input id="btnLogout type="button" value=" 退 出 " onclick="btnLogout_onclick();” disabled 
</td> 
</tr> 
</table> 
</div> 
«div id="divLeft"> 
«div id="divchat"> 
</div> 
<div id="divContainer3"> 
«table id-"tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%"> 
«tr id="trDlg"> 
<td valign="top" id="tdDlg" nowrap> 对 话 </td> 
<td valign="top" id-"tdDlg"» «textarea id="tbxMsg" cols="255" rows="2" style="width:100%"> 
</textarea></td> 
«td valign="top" id-"tdDlg"»«input id="btnSend" type="button”value=" 发 送 " onclick="btnSend_ 
onclick();" disabled></td> 
</tr> 


</table> 
</div> 

</div> 

«div id="divRight"> 

用 户 列 表 (@ 之 后 的 文字 为 用 户 的 客户 端 id): 

</div> 

«Ibody» 

在 本 实例 中 , 在 JavaScript 脚本 代码 中 用 到 了 KeepAlive 功能 。 在 使 用 jWebSocket 框架 进行 Socket 
通信 时 ， 当 客户 端 处 于 非 活动 状态 〈 客 户 端 不 向 服务 器 端 发 出 任何 请 求 ) 一 段 时 间 且 该 时 间 超出 指定 
的 timeout 时 间 值 后 ， 服 务 器 端 将 中 止 会 话 ， 将 客户 端 与 服务 器 端 之 间 的 连接 关闭 。 因 为 服务 器 端 不 能 
主动 对 客户 端 进行 操作 ， 所 以 通过 指定 超时 时 间 来 管理 会 话 与 连接 是 一 种 必需 的 管理 机 制 。 这 样 客 户 
端 可 以 通过 主动 发 送 close 令 牌 来 向 服务 器 端 请 求 关闭 客户 端 与 服务 器 端的 连接 , 服务 器 端 也 可 以 在 指 
定 的 超时 时 间 过 去 之 后 将 其 与 一 些 由 于 网 络 原 因而 与 服务 器 端 意外 断 开 连接 〈 没 有 向 服务 器 端 发 出 关 
闭 连 接 请 求 而 被 意外 中 断 连 接 ) 的 客户 端 之 间 的 连接 关闭 ， 将 被 这 些 客户 端 占用 的 端口 释放 。 如 果 没 
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有 这 种 超时 管理 机 制 ， 服 务 器 端的 端口 将 很 快 被 用 尽 〈 因 为 得 不 到 释放 ) 。 

超时 管理 机 制 是 以 客户 端 是 否 在 指定 时 间 范 围 内 与 服务 器 端 进行 交互 操作 为 依据 进行 管理 的 ， 如 
果 超 出 超时 时 间 而 客户 端 没有 向 服务 器 端 发 出 任何 请 求 ， 服 务 器 端 就 结束 会 话 ， 关 闭 连接 。 在 某 些 特 
殊 场 合 下 《〈 例 如 ， 在 网 页 中 展示 较 长 篇 幅 的 文章 或 其 他 流 数据 时 ) ， 用 户 在 较 长 时 间 内 不 再 向 服务 器 
端 发 出 任何 请 求 ， 只 是 处 于 对 文章 或 流 数据 进行 阅读 的 状态 中 ， 这 时 尽管 超出 了 超时 限制 ， 用 户 还 是 
希望 服务 器 端 保持 与 客户 端的 连接 。 在 这 种 情况 下 ， 可 以 让 客户 端 每 隔 一 段 时 间 向 服务 器 端 自动 发 送 
一 个 ping 令 牌 以 声明 自己 处 于 活动 状态 〈 没 有 因为 网 络 故障 而 意外 断 开 连接 ) ， 以 确保 服务 器 端 不 会 
结束 会 话 ， 不 会 断 开 连 接 。 服 务 器 端 也 可 以 向 客户 端 返回 一 个 响应 令 牌 ， 客 户 端 根据 这 个 响应 令 牌 来 
确认 服务 器 端 与 自己 处 于 连接 状态 。 客 户 端 每 隔 一 段 时 间 自 动 发 送 ping 令 牌 来 声明 自己 处 于 活动 状态 
的 功能 就 叫 KeepAlive 功能 。 

打开 KeepAlive 功能 的 代码 如 下 。 


jWebSocketClient. startKeepAlive(options); 


在 上 述 代 码 中 , jWebSocketClient 为 一 个 jWebSocketjSONClient 类 的 对 象 , 通过 该 语句 来 启动 一 个 
KeepAlive 计时 器 。 该 计时 器 控制 客户 端 每 隔 一 段 时 间 自 动向 服务 器 端 发 送 一 个 ping 令 牌 。 如 果 执 行 
该 语句 时 KeepAlive 计时 器 已 经 启动 , 则 之 前 启动 的 KeepAlive 计时 器 被 自动 停止 , 重新 启动 一 个 新 的 
KeepAlive 计时 器 ， 并 且 通 过 options 参数 对 该 计时 器 进行 初始 化 工作 。 

在 参数 options 中 保存 了 如 下 几 个 可 选 参数 ， 通 过 这 些 参数 可 以 初始 化 KeepAlive 计时 器 。 

EJ optionsinterval: 指定 计时 器 的 时 间 间 隔 ， 以 毫秒 为 单位 ， 参 数值 为 整数 类 型 的 毫秒 数 。 

E] options.echo: 指定 服务 器 端 是 否 需 要 向 客户 端 返回 响应 令 牌 , 参数 值 为 布尔 类 型 tue 或 false。 

El options.immediate: 指定 执行 该 语句 后 客户 端 是 否 立 即 发 送 第 一 个 ping 令 牌 , 而 不 等 待 计时 器 

的 通知 。 
执行 后 的 效果 如 图 11-5 所 示 。 


jWebSocket 聊 天 室 


mea: [EH 


用 户 列 表 (之 后 的 文字 
为 用 户 的 客户 该 ia : 


E 
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Geolocation API 用 于 将 用 户 当前 地 理 位 置信 息 共享 给 信任 的 站 点 , 这 会 涉及 用 户 的 隐私 安全 问题 ， 
所 以 当 一 个 站 点 需要 获取 用 户 的 当前 地 理 位置 时 ， 浏 览 器 会 提示 用 户 是 “允许 ”还 是 “拒绝 ”。 本 章 
将 讲解 在 HTML 5 页 面 中 使 用 Geolocation API 实现 定位 处 理 的 方法 。 


12.1  Geolocation API 介绍 


E82 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 12 XX Geolocation API 介绍 .avi 

在 HTML 5 网 页 应 用 中 ， 提 供 了 一 组 Geolocation API， 用 来 获取 用 户 的 地 理 位 置信 息 。 在 移动 设 
备 中 ,如 果 浏 览 器 支持 且 设置 有 定位 的 功能 ,就 可 以 使 用 这 组 API 定位 用 户 的 地 理 位 置 .Geolocation API 

(地理 位 置 应 用 程序 接口 ) 提供 了 一 个 可 以 准确 知道 浏览 器 用 户 当 前 位 置 的 方法 ， 且 目前 看 来 浏览 器 的 

支持 情况 还 算 不 错 〈 因 为 新 版 本 的 正 支持 了 该 API) ， 这 使 得 在 不 久之 后 就 可 以 使 用 这 一 浏览 器 内 置 的 
API 了 。 该 API 接 口 可 以 提供 详细 的 用 户 地 理 位 置信 息 ， 例 如 经 纬度 、 海 拔 、 精 确 度 和 移动 速度 等 。 

在 Geolocation API 中 ， 其 位 置 的 获取 是 通过 收集 用 户 周围 的 无 线 热点 和 PC 的 IP 地 址 。 然 后 浏览 
器 把 这 些 信 息 发 送 给 默认 的 位 置 定 位 服务 提供 者 ， 也 就 是 谷歌 位 置 服务 ， 由 它 来 计算 用 户 位 置 。 最 后 
用 户 的 位 置信 息 就 在 用 户 请 求 的 网 站 上 被 共享 出 来 。 到 目前 为 止 ， 虽 然 Geolocation 还 不 是 HTML 5 Jt 
范 的 一 部 分 ， 但 是 W3C 为 其 专门 定制 了 一 份 详细 的 规范 。 


12.1.1. 对 浏览 器 的 支持 情况 


目前 W3C 地 理 位置 API 被 以 下 桌面 浏览 器 支持 : 
Firefox 3.5+。 

Chrome 5.0+。 

Safari 5.0+。 

Opera 10.60+。 

Internet Explorer 12.0+。 

W3C 地 理 位 置 API 还 可 以 被 如 下 所 示 的 手机 设备 所 支持 : 
Android 2.0+。 

iPhone 3.0+。 

Opera Mobile 10.1+。 

Symbian (S60 3rd & 5th generation). 
BlackBerry OS 6. 

Maemo. 
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12.1.2 ”使 用 API 
在 使 用 地 理 位 置 API 之 前 ， 首 先 要 检测 浏览 器 是 否 支持 ， 例 如 下 面 的 测试 代码 。 
if (navigator.geolocation) ( 
// 我 们 的 目的 
) 


当然 ， 这 个 让 判断 也 能 用 来 进行 浏览 器 的 判断 操作 ， 可 以 区 分 IE 6 一 正 8 版 本 浏览 器 与 正 9 和 其 
他 新 型 的 浏览 器 。 这 在 使 用 某 些 CSS 3 属性 时 非常 有 用 ， 检 测 浏览 器 是 否 支 持 某 些 CSS 3 属性 相对 比 
较 麻烦 。 当 然 可 以 折 中 一 下 ， 即 在 知道 浏览 器 对 该 CSS 3 属性 的 支持 情况 下 检测 浏览 器 。 一 般 来 说 ， 
就 是 区 分 IE 6—IE 8 浏览 器 和 其 他 浏览 器 ， 这 与 navigator.geolocation 的 检测 是 一 致 的 。 

通过 这 个 API， 使 用 如 下 两 个 方法 变量 可 以 获取 用 户 的 地 理 位 置 。 

E getCurrentPosition(). 

EI  watchPosition(). 


这 两 个 方法 的 参数 一 致 ， 都 支持 3 个 参数 ， 例 如 getCurrentPosition0) 的 格式 如 下 。 
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 


参数 说 明 如 下 。 
E] successCallback: 为 方法 成 功 时 的 回调 ， 此 参数 必需 。 
errorCallback: 为 方法 失败 时 的 回调 ， 此 参数 可 选 。 
options: 为 额外 参数 ， 也 是 可 选 参数 对 象 。option 参数 支持 如 下 3 个 可 选 参数 API。 
>  enableHighAccuracy: 表示 是 否 高 精度 可 用 ， 为 Boolean 类 型 ， 默 认为 false， 如 果 开启 ， 
响应 时 间 会 变 慢 ， 同 时 ， 在 手机 设备 上 会 用 掉 更 多 的 流量 。 
> timeout: 表示 等 待 响 应 的 最 大 时 间 ， 默 认 是 0 毫秒 ， 表 示 无 穷 时 间 。 
>  maximumAge: 表示 应 用 程序 的 缓存 时 间 。 单 位 为 毫秒 ， 默 认 是 0， 意 味 着 每 次 请 求 都 是 
立即 去 获取 一 个 全 新 的 对 象 内 容 。 
注意 : getCurrentPosition() 方 法 属于 一 次 性 取 用 户 的 地 理 位 置信 息 ， 而 watchPosition() 方 法 则 不 停 地 取 用 
户 的 地 理 位 置信 息 ， 不 停 地 更 新 用 户 的 位 置信 息 ， 这 在 需要 实时 获知 自己 的 位 置 时 显得 比较 受 
用 。watchPosition() 方 法 可 以 通过 clearWatch() 方 法 停 掉 (停止 不 断 更 新 用 户 地 理 位 置信 息 ) ， 方 
法 就 是 传递 watchPosition() 方 法 返回 的 watchID 给 clearWatch(0)。 当 用 户 的 位 置 被 返回 时 ， 会 藏 在 
一 个 位 置 对 象 中 ， 该 对 象 包括 一 些 属 性 ， 具 体 如 表 12-1 所 示 。 


M 
[ral 


35x 12-1 属性 说 明 
属 性 # xx B 性 Rm x 
coords.latitude “| 纬度 数值 coords.altitudeAccuracy | 高 度 的 精确 度 
coords.longitude | 经度 数值 coords heading 设备 正 北 顺 时 针 前 进 的 方位 
coords.altitude — | 一 个 估计 高 度 , 海拔 水 平 线 往 上 的 高 度 | coords.speed. 设备 外 部 环境 的 移动 速度 (mys) 
coords.acc 精确 度 times 当 位 置 捕获 到 时 的 时 间 戳 
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12.2 获取 当前 地 理 位 置 


C 知识 点 讲解 : 光盘 \ 视 频 讲解 第 12 章 \ 获 取 当前 地 理 位 置 .avi 

在 HTML 5 网 页 中 ,使 用 getCurrentPosition0 方 法 可 以 获取 当前 的 地 理 位 置 。 如 果 浏 览 器 需要 获取 
用 户 当前 的 地 理 位 置信 息 ， 需 要 通过 API 访问 window.navigator 对 象 中 新 添加 的 geolocation 属性 ， 并 
调用 该 属性 中 的 getCurrentPosition0 方 法 获取 用 户 当 前 地 理 位 置信 息 ， 其 调用 的 代码 格式 如 下 。 

navigator.geolocation.getCurrentPosition( 

successCallback, 

errorCallback, 

[Options] 
) 


参数 说 明 如 下 。 

回 successCallback: 是 一 个 函数 ， 用 于 成 功 获取 用 户 当前 地 理 位 置信 息 时 的 回调 操作 。 该 回调 函 
数 中 有 一 个 形 参 position， 该 参数 是 一 个 对 象 ， 用 于 描述 位 置 的 详细 数据 信息 。 

回 errorCallback: 是 一 个 获取 地 理 位 置 失败 时 回调 的 函数 ， 该 函数 中 通过 一 个 error 对 象 作为 形 
参 ， 根 据 该 对 象 的 code 属性 获取 定位 失败 的 原因 。 该 属性 包括 如 下 4 个 值 。 
> 0: 表示 未 知 错误 信息 。 
> 1: 表示 用 户 拒绝 了 定位 服务 的 请 求 。 
> 2: 表示 没有 获取 正确 的 地 理 位 置信 息 。 
> 3: 表示 获取 位 置 的 操作 超时 。 

在 error 对 象 中 , 除了 属性 code 表示 出 错 数 字 外 , 还 可 以 通过 属性 message 获取 出 错 的 详细 文字 信 

。 该 属性 是 一 个 字符 串 ， 包 含 与 code 属性 值 相对 应 的 错误 说 明 信 息 。 
E] Options: 这 是 一 个 可 选择 的 对 象 ， 设 置 后 可 以 为 对 象 添加 一 些 属性 内 容 。 


区 实例 12-1: 在 网 页 中 获取 当前 地 理 位 置 

ena. | 源码 路 径 : Jti codesi2M html ——————00000 suse 
在 本 实例 中 ， 当 使 用 方法 getCurentPosition0 获 取 当 前 用 户 的 浏览 器 地 理 位 置信 息 时 ， 在 弹出 的 是 

否 共享 窗口 中 ， 如 果 用 户 选择 了 “拒绝 ”， 则 将 捕获 的 错误 信息 通过 回调 函数 errorCallback0 中 的 

error.code 与 errormessage 显示 在 页 面 中 。 实 例文 件 Lhtml 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src="js1.js"/> 

</script> 

«script type-"text/javascript" language-"jscript" 
src-"http://maps.google.com/maps/api/js?sensor-false"/7 

</script> 

</head> 

«body onLoad="pageload();"> 

<p id="pStatus"></p> 
</body> 
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脚本 文件 jsl.js 的 主要 代码 如 下 。 


function $$(id) { 
return document.getElementByld(id); 


} 
// 自 定义 页 面 加 载 时 调用 的 函数 
function pageload() { 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function(ObjPos) { 
Status_Handle(" 获 取 成 功 ""); 
h 
function(objError) { 
Status Handle(objError.code + ":" + objError.message); 
) 
{ 
maximumAge: 3 * 1000 * 60, 
timeout: 3000 
» 
l 


H 

// 自 定义 显示 执行 过 程 中 状态 的 函数 

function Status Handle(message) ( 
S$$("pStatus").style.display = "block"; 
$S$("pStatus").innerHTML = message; 

) 


在 上 述 代码 中 ， 如 果 浏 览 器 第 一 次 调用 getCurrentPosition0 方 法 ， 出 于 安全 的 考虑 ， 浏 览 器 会 询问 
用 户 是 否 共享 位 置 数据 信息 。 如 果 用 户 拒绝 则 该 方法 将 出 现 错误 ， 无 法 获取 用 户 的 地 理 位 置 数据 ， 只 
有 当 用 户 允 许 共享 地 理 位 置 时 ， 方 法 getCurrentPosition() 才 能 生效 。 执 行 效果 如 图 12-1 所 示 。 


图 12-1 执行 效果 


目前 , 各 浏览 器 厂商 对 该 Geolocation API 的 支持 情况 不 完全 相同 , 因此 在 调用 getCurrentPosition() 
方法 之 前 , 需要 先 用 方法 navigator.geolocation0 检 测 当 前 浏览 器 是 否 支 持 定位 功能 , 然后 才 开 始 调用 方 
法 getCurrentPosition() 获 取 用 户 地 理 位 置信 息 。 当 使 用 方法 getCurentPosition0 获 取 当 前 浏览 器 地 理 位 
置信 息 时 ， 用 户 允 许 了 位 置 共 享 ， 并 且 浏 览 器 也 支持 定位 功能 ， 那 么 该 方法 就 可 以 正确 地 获取 当前 地 
理 位 置 数据 。 

在 使 用 getCurrentPosition0 方 法 时 ， 如 果 获 取 位 置 成 功 ， 则 回调 successCallbackO 函 数 。 该 函数 通 
过 一 个 对 象 参数 position 返回 所 有 的 地 理 位 置 详细 数据 信息 ， 这 些 信 息 以 对 象 的 属性 形式 进行 展示 。 
position 对 象 包含 两 个 重要 的 属性 , 分 别 为 timestamp 和 coords, 其 中 属性 timestamp 表示 获取 地 理 位 置 
时 的 时 间 ， 而 属性 coords 则 包含 多 个 值 。 
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注意 : 显然 ， 地 理 位 置 属 于 用 户 的 隐私 信息 之 一 ， 因 此 浏览 器 不 会 直接 把 用 户 的 地 理 位 置信 息 呈 现 出 
来 ， 当 需要 获取 用 户 地 理 位 置信 息 时 ,浏览 器 会 询问 用 户 ， 是 否 愿 意 透露 自己 的 地 理 位 置信 息 ， 
如 图 12-2 所 示 。 
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图 12-2 设置 截图 
如 果 选 择 不 共享 ， 则 浏览 器 不 会 做 任何 事情 。 如 果 不 小 心 对 某 个 站 点 共享 了 地 理 位 置 ， 可 以 随 
时 将 其 取消 ， 具 体 方法 如 下 。 
(1) 对 于 IE 9 浏览 器 来 说 ， 依 次 选择 “Internet 选 项 ”一 “隐私 ”一 “位 置 (清除 站 点 ) ”， 如 
图 12-3 所 示 。 
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图 12-3 正 浏览 器 
(2) 对 于 Firefox 浏 览 器 来 说 ， 依 次 单 击 地 址 栏 前 面 的 网 站 小 图 标 一 “更 多 信息 ”一 “权限 ”一 
“共享 方位 信息 ”一 “阻止 ”， 具 体 步 骤 如 图 12-4 所 示 。 
(3) 如 果 是 Chrome 浏 览 器 ， 则 直接 单 击 地 址 栏 右边 像 轮船 方向 盘 一 样 的 小 图 标 ， 就 会 看 到 可 以 
取消 地 理 位 置 的 设置 选项 ， 如 图 12-5 所 示 。 
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图 12-4 Firefox 浏览 器 
= Ox 
12-5 Chrome 浏览 器 


12.3 ”使 用 getCurrentPosition() 2 ;& 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 12 章 \ 使 用 getCurrentPosition0 方 法 .avi 


在 本 实例 的 HTML 页 面 中 ， 调 用 getCurrentPosition() 方 法 成 功 获取 当前 浏览 器 的 地 理 位 置 ， 并 将 
获取 的 位 置信 息 展示 在 页 面 的 <p> 元 素 中 。 实 例文 件 2.html 的 主要 代码 如 下 。 


«IDOCTYPE html» 
«script type-"text/javascript" language-"jscript" 
src="js2.js"/> 
</script> 
«script type-"text/javascript" language-"jscript" 
src-"http://(maps.google.com/maps/api/js?sensor-false"/ 
</script> 
</head> 
«body onLoad="pageload():"> 
<p id="pStatus"></p> 
</body> 
编写 脚本 文件 js2.js， 当 使 用 getCurrentPosition0 方 法 成 功 获取 地 理 位 置 数据 后 ， 可 以 回调 函数 
successCallback()。 解 析 对 象 参数 objPos， 如 果 需 要 展示 获取 的 时 间 ， 则 调用 该 对 象 的 timestamp 属性 ; 
如 果 需 要 展示 地 理 位 置 数据 ， 则 通过 对 象 的 coords 各 个 属性 值 来 显示 。 
因为 各 浏览 器 对 Geolocation API 支持 的 情况 不 同 ， 因 此 同一 代码 在 两 个 不 同 浏览 器 中 执行 后 返回 
的 结果 会 出 现 一 些 偏差 或 对 某 些 属性 不 支持 ， 如 Firefox 5.0 中 支持 显示 地 理 位 置 所 在 的 国家 、 省 份 、 
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城市 等 信息 ， 而 Chrome 10 浏览 器 则 不 支持 。 
此 外 ， 如 果 需 要 持续 监测 当前 的 地 理 位 置 ， 可 以 调用 以 下 方法 。 


var intWatchID-navigator.geolocation.watchCurrentPosition(successCallback, errorCallback, [Options]) 


其 中 的 参数 与 getCurrentPosition() 方 法 一 样 , 但 该 方法 还 返回 一 个 intWatchID 值 , 用 于 停止 持续 监 
测 的 操作 。 如 果 需 要 停止 持续 监测 ， 则 调用 下 列 方法 。 


clearWatch(intWatchID) 
此 方法 通过 清除 持续 监测 时 返回 的 intWatchID 值 ， 实 现 停止 持续 监测 的 功能 。 


12.4 在 网 页 中 使 用 地 图 


Ghi 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 12 章 \ 在 网 页 中 使 用 地 图 .avi 

在 本 章 前 面 的 内 容 中 ， 详 细 介 绍 了 使 用 getCurrentPosition() 方 法 获取 用 户 地 理 位 置信 息 的 过 程 。 其 
实 完全 可 以 通过 使 用 Google 地 图 中 的 Google Map API, 将 获取 的 位 置信 息 标记 在 地 图 中 ， 从 而 实现 在 
Google 地 图 中 锁定 位 置 的 功能 。 


12.4.1 在 网 页 中 调用 地 图 


区 实例 12-3: 在 HTML 5 网 页 中 使 用 地 图 
源码 路 径 : 光盘 :\codes\12\3.html 


在 本 实例 的 HTML 页 面 中 , 通过 <div> 元 素 显示 一 幅 Google 地 图 ， 并 将 Google Map API 中 的 对 象 
与 getCurrentPosition() 方 法 相 结合 ， 在 地 图 中 标注 当前 地 理 位 置 ， 当 该 位 置 发 生变 化 时 ， 地 图 中 的 标注 
信息 也 随 之 发 生变 化 。 

实例 文件 3.html 的 主要 代码 如 下 。 


«script type-"text/javascript" language-"jscript" 
src="js3.js"/> 
</script> 
«script type-"text/javascript" language="jscript" 
src-"http://(maps.google.com/maps/api/js?sensor-false"/^ 
</script> 
</head> 
«body onLoad="pageload();"> 
«div id="divMap"></div> 
</body> 
编写 脚本 文件 js3js， 为 了 能 够 使 用 Google 地 图 及 Google Map API， 需 要 使 用 <scrip 伺 元 素 导 入 对 应 
的 脚本 文件 ， 文 件 的 URL 为 http://maps.google.com/map s/api/js?sensor-false. 383i getCurrentPosition() 
方法 获取 经 度 与 纬度 ， 创 建 一 个 地 图 中 心 坐标 latthg， 并 将 该 中 心 点 设置 为 页 面 打开 时 Google 地 图 的 
中 心 点 。 同 时 ， 将 设置 好 的 地 图 与 页 面 中 ID 号 为 divMap 的 元 素 绑 定 ， 将 地 图 显示 在 页 面 中 。 最 后 在 
地 图 中 创建 一 个 锁定 标记 objMrk， 并 在 创建 的 标记 窗口 objInf 中 设 定 标记 在 地 图 中 显示 的 注释 中 文 ， 
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通过 调用 地 图 的 open() 方 法 ， 在 地 图 中 打开 带 有 注释 中 文 的 标记 窗口 。 
执行 效果 如 图 12-6 所 示 。 
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12-6 ”执行 效果 
124.2 ”在 地 图 中 显示 当前 的 位 置 


在 HTML 5 网 页 中 ， 可 以 先 在 页 面 中 制作 一 幅 地 图 ， 然 后 在 页 面 中 显示 用 户 计算 机 或 移动 设备 所 
在 地 的 地 图 。 在 浏览 器 中 打开 实例 页 面 时 ， 浏 览 器 会 询问 用 户 是 否 共 享用 户 计算 机 或 移动 设备 的 地 理 位 
置信 息 。 在 不 支持 Geolocation API 的 浏览 器 中 ， 打 开 浏 览 器 时 会 显示 错误 提示 信息 。 在 支持 Geolocation 
API 的 浏览 器 中 ， 当 浏览 器 询问 用 户 是 否 共享 用 户 计算 机 或 移动 设备 的 地 理 位 置信 息 时 ， 选 择 共享 地 
理 位 置信 息 ， 浏 览 器 中 将 会 显示 用 户 计算 机 或 移动 所 在 地 的 地 图 。 


区 | 实例 12-4: 在 网 页 地 图 中 显示 当前 的 位 置 
NL. |. 源码 路 径 : 光盘 :\codes\l2M4hml ss 

在 本 实例 页 面 中 ， 用 户 单 击 “ 监 视 位置 更 改 ” 按 钮 后 ， 浏 览 器 将 会 对 用 户 计算 机 或 移动 设备 所 在 
地 进行 监视 ， 每 隔 一 段 时 间 检 查 用 户 计 算 机 或 移动 设备 的 地 理 位 置 是 否 发 生 改 变 。 如 果 当 前 计算 机 或 
移动 设备 的 地 理 位 置 发 生 改变 ， 则 更 新 页 面 中 的 地 图 。 用 户 单 击 “ 停 止 监视 ”按钮 后 会 取消 该 监视 。 
实例 文件 4html 的 主要 代码 如 下 。 


«script type="text/javascript"> 
var streetNumber,street,city,province,country; 
var watchld; 
function window onload() { 

if(navigator.geolocation--null) 

alert(" 您 的 浏览 器 不 支持 Geolocation API"); 

else 

navigator.geolocation.getCurrentPosition(showMap,onkError, (timeout:60000,enableHighAccuracy:true]); 


} 

function watchPosition() { 
watchld-navigator.geolocation.watchPosition(showMap); 

) 

function clearWatch() 

f 


navigator.geolocation.clearWatch(watchld); 
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) 


function showMapí(position) 


1 


) 


var coords - position.coords; 
var lating = new google.maps.LatL ng(coords.latitude, coords.longitude); 
var myOptions ={ 
zoom: 18, 
center: lating, 
mapTypeld: google.maps.MapTypeld.ROADMAP 
k 
var map1= new google.maps.Map(document.getElementByld("map"), myOptions); 
var marker = new google.maps.Marker(( 
position: lating, 
map: map1 
» 
var infowindow = new google.maps.InfoWindow(( 
content: "当前 位 置 " 
H: 
infowindow.open(map1, marker); 


function onError(error) 


( 


) 


var message = ""; 
switch (error.code) ( 
case error.PERMISSION DENIED: 
message = "位 置 服务 被 拒绝 "; 
break; 
case error.POSITION UNAVAILABLE: 
message = "未 能 获取 到 位 置信 息 "; 
break; 
case error.PERMISSION DENIED TIMEOUT: 

message = "在 规定 时 间 内 未 能 获取 到 位 置信 息 "; 

break; 
) 
if (message == ") 
t 

var strErrorCode = error.code.toString(); 
message = "由 于 不 明 原 因 ， 未 能 获取 到 位 置信 息 (错误 号 : "+strErrorCode+")."; 

) 
alert(message); 
document.getElementByld("watchPosition").disabled-"disabled"; 
document.getElementByld("clearWatch").disabled-"disabled"; 


</script> 

«script type-"text/javascript" src=http://maps.google.com/maps/api/js?sensor=false></script> 
</head> 

<body onload-"window onload()" 


«input type="button" id-"watchPosition" value=" 533 fir Æ € z4" onclick-"watchPosition()"/»«input type= 


"button" id-"clearWatch" value=" 停 止 监视 " onclick="clearWatch"/> 


«div id="map" style-"width:500px; height:460px"></div> 


</body> 
执行 效果 如 图 12-7 所 示 。 
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图 12-7 执行 效果 
12.4.8 ”在 网 页 中 居中 显示 定位 地 图 


区 à 居中 显示 
NL. — |; 源码 路 径 : 光盘 :\codes\l25hml s 


本 实例 比较 简单 ， 只 是 以 前 面 的 实例 为 基础 进行 了 简单 的 修改 ， 将 地 图 在 网 页 的 中 间 位 置 显 示 。 
实例 文件 5.html 的 主要 代码 如 下 。 


«script src-"http://maps.google.com/maps/api/js?sensor-true"- «/script» 
«script» 


if(navigator.geolocation) { 


function hasPosition(position) { 
var point = new google.maps.LatL ng(position.coords.latitude, position.coords.longitude), 


myOptions = ( 
zoom: 15, 
center: point, 
mapTypeld: google.maps.MapTypeld.ROADMAP 


mapDiv = document.getElementByld("mapDiv"), 
map = new google.maps.Map(mapDiv, myOptions), 


marker = new google.maps.Marker(( 
position: point, 
map: map, 
title: "You are here" 
y 
H 


function positionError(error) 
t 
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/做 错误 处 理 


} 
linavigator.geolocation.getCurrentPosition(hasPosition); 
navigator.geolocation.getCurrentPosition(hasPosition, positionError, { enableHighAccuracy:true }); 
} 
</script> 
<style> 
#mapDiv { 
Width:320px; 
height:460px; 
border:1px solid #efefef 
margin:auto; 
-moz-box-shadow:5px 5px 10px #000; 
-webkit-box-shadow:5px 5px 10px #000; 


) 

</style> 

</head> 

<body> 

<div id="mapDiv"></div> 


</body> 
执行 效果 如 图 12-8 所 示 。 
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图 12-8 执行 效果 


12.4.86. ”利用 百度 地 图 实现 定位 处 理 


区 实例 12-6: 在 HTML 5 网 页 中 利用 百度 地 图 实现 定位 
源码 路 径 : 光盘 :\codes\12\6.html 


本 实例 在 HIML 5 网 页 中 使 用 百度 地 图 实现 当前 的 位 置 定位 。 实 例文 件 6html 的 主要 代码 如 下 。 
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«script type-'text/javascript' src='http://api.map.baidu.com/api?v=1.3'></script> 


«script type-'text/javascript' 


function getLocation() 
f 


if(navigator.geolocation)( 


navigator.geolocation.getCurrentPosition(showMap, handleError, (enableHighAccuracy:true, maximumAge: 


1000)); 
Jelset 
alert(' 您 的 浏览 器 不 支持 使 用 HTML. 5 来 获取 地 理 位 置 服务 '); 
) 
) 


function showMap(value) 
( 
var longitude = value.coords.longitude; 
var latitude = value.coords.latitude; 
var map = new BMap.Map('map"); 
var point = new BMap.Point(longitude, latitude); 
map.centerAndZoom(point, 15); 


var marker = new BMap.Marker(new BMap.Point(longitude, latitude); 


map.addOverlay(marker); 
} 


function handleError(value) 
a 
Switch(value.code)( 
case 1: 
alert(' 位 置 服务 被 拒绝 '); 
break; 
case 2: 
alert( 暂 时 获取 不 到 位 置信 息 '); 
break; 
case 3: 
alert(' 获 取信 息 超时 '); 
break; 
case 4: 
alert( 未 知 错误 ); 
break; 


) 


function init() 
{ 


getLocation(); 
} 


window.onload = init; 


// 创 建 点 坐标 
// 创 建 标注 
// 将 标注 添加 到 地 图 中 
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</script> 

</head> 

<body> 

<div id-'map' style='width:600px;height:600px;'></div> 
</body> 

执行 效果 如 图 12-9 所 示 。 
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图 12-9 执行 效果 


第 13 章 使 用 Web Workers API 


TE HTML 5 网 页 应 用 中 ,使 用 Worker 可 以 将 前 台中 的 JavaScript 代码 分 割 成 若干 个 分 散 的 代码 块 ， 
分 别 由 不 同 的 后 台 线 程 负责 执行 ， 这 样 可 以 避免 由 于 前 台 单线 程 执 行 缓慢 出 现 用 户 等 待 的 局 面 。 后 台 
的 单个 独立 线程 不 仅 可 以 被 前 台所 调用 ， 实 现 数据 间 的 互 访 ， 而 且 在 后 台 线 程 中 还 可 以 调用 新 的 子 线 
程 ， 分 割 父 线程 的 功能 ， 实 现 线程 的 藤 套 调用 。 本 章 将 详细 介绍 使 用 Worker 线程 的 方式 实现 前 、 后 台 
数据 交互 的 过 程 ， 并 通过 具体 实例 来 演示 具体 实现 流程 。 


13.1 Web Workers API 基础 


Gaa 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 13 章 \Web Workers API 基础 .avi 

从 传统 意义 上 来 说 ， 浏 览 器 是 单线 程 的 ， 它 们 会 强制 应 用 程序 中 的 所 有 脚本 一 起 在 单个 UI 线程 中 
运行 。 虽 然 可 以 通过 使 用 文档 对 象 模型 (DOM) 事件 和 setTimeout API 造成 一 种 多 个 任务 同时 运行 的 
假象 ， 但 只 需 一 个 计算 密集 型 任务 就 会 使 用 户 体验 急转直下 。 本 节 将 简要 介绍 Web Workers API 的 基 
本 知识 ， 为 读者 步 入 本 书后 面 知 识 的 学 习 打 下 基础 。 


13.1.1 使 用 HTML 5 Web Workers API 


使 用 Web Workers 的 方法 非常 简单 ， 只 需 创建 一 个 Web Workers 对 象 ， 然 后 传 入 希望 执行 的 
JavaScript 文件 。 另 外 ， 在 页 面 中 再 设置 一 个 事件 监听 器 ， 用 来 监听 由 Web Workers 发 来 的 消息 和 错误 
信息 。 如 果 想 要 在 页 面 与 Web Workers 之 间 建 立 通信 ， 数 据 需要 通过 函数 postMessage( 来 传递 。 对 于 
Web Worker JavaScript 中 的 代码 也 是 如 此 ， 也 必须 通过 设置 事件 处 理 程序 来 处 理发 来 的 消息 和 错误 信 
息 ， 通 过 postMessage0 函 数 实现 与 页 面 的 数据 交互 。 

(1) 创建 HTML 5 Web Workers 

Web Workers 初始 化 时 会 接收 一 个 JavaScript 文 件 的 URL 地 址 , 其 中 包含 了 供 Worker 执行 的 代码 。 
这 段 代 码 会 设置 事件 监听 器 ， 并 与 生成 Worker 的 容器 进行 通信 。JavaScript 文件 的 URL 可 以 是 相对 或 
者 绝对 路 径 ， 只 要 是 同 源 〈 相 同 协议 、 主 机 和 端口 ) 即 可 。 

worker-new Worker("echoWorker.js"); 


(2) 多 个 JavaScript 文件 的 加 载 与 执行 
对 于 由 多 个 JavaScript 文件 组 成 的 应 用 程序 来 说 ， 可 以 通过 包含 <scrip 人 > 元素 的 方式 ， 在 页 面 加 载 
时 同步 加 载 JavaScript 文件 。 然而， 由 于 Web Workers 没有 访问 document 对 象 的 权限 ， 所 以 在 Worker 
中 必须 使 用 另外 一 种 方法 导入 其 他 的 JavaScript 文件 一 一 importScripts。 


importScripts("helper.js"); 


ea SO mw se 


导入 的 JavaScript 文件 只 会 在 某 一 个 已 有 的 Worker 中 加 载 和 执行 。 多 个 脚本 的 导入 同样 也 可 以 使 
用 importScripts0 函 数 ， 它 们 会 按 顺 序 执行 。 


importScripts("helper.js","anotherHelper.js"); 
(3) 与 HTML 5 Web Workers 通信 


一 旦 生成 Web Workers, 就 可 以 使 用 postMessage API 传送 和 接收 数据 。postMessage API 还 支持 跨 
框架 和 跨 窗口 通信 。 大 多 数 JavaScript 对 象 都 可 以 通过 postMessage 发 送 ， 但 含有 循环 引用 的 除外 。 


13.1.2 ”需要 使 用 .js 文件 


Web Workers API 为 Web 应 用 程序 的 创作 人 员 提 供 了 一 种 方法 ， 用 于 生成 与 主页 并 行 运行 的 后 台 
脚本 。 可 以 一 次 生成 多 个 线程 以 用 于 长 时 间 运 行 的 任务 。 新 的 Worker 对 象 需要 一 个 .js 文件 ， 该 文件 通 
过 一 个 发 给 服务 器 的 异步 请 求 包含 在 内 。 


var myWorker = new Worker('worker.js'); 


往来 于 Worker 线程 的 所 有 通信 都 通过 消息 进行 管理 ,主机 Worker 和 Worker 脚本 可 以 通过 postMessage 
发 送 消息 并 使 用 onmessage 事件 侦 听 响应 。 消 息 的 内 容 作为 事件 的 数据 属性 进行 发 送 。 
例如 下 面 的 代码 创建 了 一 个 Worker 线程 并 侦 听 消息 。 


var hello = new Worker('hello.js"); 

hello.onmessage = function(e) ( 
alert(e.data); 

k 


这 样 Worker 线程 可 以 发 送 要 显示 的 消息 。 
postMessage(Hello world!"); 


13.1.3 5 Web Worker 进行 双向 通信 


要 建立 双向 通信 , 主页 和 Worker 线程 都 要 侦 听 onmessage 事件 。 例 如 在 下 面 的 演示 代码 中 , Worker 
线程 在 指定 的 延迟 后 返回 消息 。 
首先 ， 该 脚本 创建 Worker 线程 。 
var echo = new Worker('echo.js"); 
echo.onmessage - function(e) ( 
alert(e.data); 
) 


消息 文本 和 超时 值 在 表单 中 进行 指定 。 当 用 户 单 击 “提交 ”按钮 时 , 脚本 会 将 两 条 信息 以 JavaScript 
对 象 文本 的 形式 传递 给 Worker。 为 了 防止 页 面 在 新 的 HTTP 请 求 中 提交 表单 值 ， 事 件 处 理 程序 还 对 事 
件 对 象 调用 preventDefault0。 注意， 不 能 将 对 DOM 对 象 的 引用 发 送 给 Worker 线程 。Web Worker 并 非 
可 以 访问 所 有 数据 ， 它 只 允许 访问 JavaScript 基 元 〈 例 如 Object 或 String 值 ) 。 

<script> 

window.onload = function() { 


e. 


第 13 & 使 用 Web Workers API 


var echoForm = document.getElementByld('echoForm'; 
echoForm.addEventL istener('submit', function(e) { 
echo.postMessage(( 
message : e-target.message.value, 
timeout : e.target.timeout.value 
» 
e.preventDefault(); 
}, false); 
} 
</script> 
<form id="echoForm"> 
<p>Echo the following message after a delay.</p> 
«input type="text" name-"message" value-"Input message here."/><br/> 
«input type-"number" name-"timeout" max-"10" value-"2"/» seconds.«br/^ 
<button type-"submit"» Send Message</button> 
</form> 


最 后 ，Worker 开始 侦 听 消息 ， 并 在 指定 的 超时 间隔 之 后 将 其 返回 。 
onmessage =function(e) 

setTimeout(function() 

t 


postMessage(e.data.message); 


) 
e.data.timeout * 1000); 
) 


在 IE 10 和 使 用 JavaScript 的 Metro 风格 应 用 中 ，Web Workers API 支持 如 表 13-1 所 示 的 方法 。 


表 13-1 Web Workers API 支持 的 方法 


终止 Worker 线程 
导入 其 他 JavaScript 文件 的 逗号 分 隔 列表 
从 Worker 线程 发 送 消息 或 发 送 消息 到 Worker 线程 


void close0: 
void importScripts(inDOMString.. urls): 
void postMessage( 在 任何 数据 中 ): 
IE 10 和 使 用 JavaScript 的 Metro 风格 应 用 支持 如 表 13-2 所 示 的 Web Workers API 属性 。 
表 13-2 Web Workers API 属性 
属 性 类 型 描述 
location | WorkerLocation | 代表 绝对 URL， 包 括 protocol, host, port, hostname, pathname, search 和 hash 组 件 


navigator | WorkerNavigator | 代表 用 户 代 理 客户 端的 标识 和 onLine 状态 
self WorkerGlobalScope | Worker 范围 ， 包 括 WorkerLocation 和 WorkerNavigator 对 象 


IE 10 和 使 用 JavaScript 的 Metro 风格 应 用 支持 如 表 13-3 所 示 的 Web Workers API 事件 。 
表 13-3 Web Workers API 事件 


描 iğ 


出 现 运行 时 错误 
接收 到 消息 数据 
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Web Workers API 还 支持 更 新 的 HIML 5 WindowTimers 方法 ， 如 表 13-4 所 示 。 
3& 13-4. WindowTimers 方法 


5o dX 描述 
void clearInterval(inlonghandle): 取消 由 句柄 所 确定 的 超时 
void clearTimeout(inlonghandle): 取消 由 句柄 所 确定 的 超时 


计划 在 指定 的 毫秒 数 之 后 重复 运行 的 超时 。 注 : 现在 可 以 将 其 他 参数 直接 传 
递 到 处 理 程序 。 如 果 处 理 程序 是 DOMString， 将 被 编译 成 JavaScript。 将 句 
柄 返回 到 超时 ， 清 除 clearInterval 

计划 在 指定 的 毫秒 数 之 后 运行 的 超时 。 注 : 现在 可 以 将 其 他 参数 直接 传递 到 
处 理 程序 。 如 果 处 理 程序 是 DOMString， 将 被 编译 成 JavaScript。 将 句柄 返 
回 到 超时 ， 清 除 clearTimeout 


long setInterval(in anyhandler, in 
optional any timeout, in any... args): 


long setTimeout(in any handler, in optional 
any timeout, in any... args) : 


13.2 Worker 线程 处 理 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 13 章 \Worker 线程 处 理 .avi 

如 果 一 个 网 页 的 执行 时 间 较 长 ， 则 可 能 需要 用 户 等 待 一 段 时 间 去 操作 ， 此 时 可 以 将 工作 交 给 后 台 
线程 Worker 去 处 理 。 虽 然 它 与 前 台 的 线程 分 离 , 互 不 影响 , 但 是 可 以 通过 postMessage() 方 法 与 onmessage 
事件 进行 数据 的 交互 。postMessage0 方 法 用 于 通过 Worker 对 象 发 送 数据 ， 有 具体 调用 格式 如 下 。 


var objWorker=new Worker(" 脚 本 文件 URL"); 
objWorker.postMessage(data); 


B ”第 一 行 代码 : 用 于 实例 化 一 个 Worker 类 对 象 ， 创 建 一 个 名 为 objWorker 的 后 台 线 程 。 

加 第 二 行 代码 : 通过 objWorker 调用 postMessage() 方 法 ， 向 后 台 线 程 发 送 文本 格式 的 data 数据 。 

为 了 在 前 台 接收 后 台 线 程 返回 的 数据 ， 需 要 在 定义 obj Worker 对 象 后 添加 一 个 message 事件 ， 用 
于 捕 提 后 台 线 程 返回 的 数据 ， 有 具体 调用 格式 如 下 。 

objWorker.addEventListener('message', 


function (event) ( 
alert (event.data); 


false); 


其 中 ，event.data 表示 后 台 线 程 处 理 完成 后 返回 给 前 台 的 数据 。 


13.2.1 ”使 用 Worker 处 理 线程 


re 实例 13-1: 使 用 Worker 处 理 线程 
源码 路 径 : 光盘 :\codes\13\1.html 


本 实例 创建 了 一 个 HTML 5 页 面 ， 当 页 面 在 加 载 时 创建 了 一 个 Worker 后 台 线程 。 当 用 户 在 文本 杠 
中 输入 生成 随机 数 的 位 数 并 单 击 “ 请 求 ”按钮 时 ， 向 该 后 台 线程 发 送 文本 框 中 的 输入 值 ， 后 台 线 程 将 
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根据 接收 的 数据 生成 指定 位 数 的 随机 数 ， 返 回 给 前 台 调 用 代码 并 显示 在 页 面 中 。 
实例 文件 1.html 的 具体 实现 代码 如 下 。 


«*IDOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8" /> 
«title» Worker 处 理 线程 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
«script type-"text/javascript" language="jscript" 
src="js1.js"/> 
</script> 
</head> 
<body onLoad="pageload();"> 
<fieldset> 
<legend> 线 程 脚本 处 理 数据 </legend> 
<p id="pStatus"></p> 
<input id="txtNum" type="text" class="inputtxt"> 
«input id="btnAdd" type="button" value=" 请 求 " 
class-"inputbtn" onClick="btnSend_Click();"> 
</fieldset> 
</body> 
</html> 


在 上 述 页 面 中 导入 一 个 JavaScript 文件 jsljs， 在 里 面 自 定义 了 两 个 函数 ， 分 别 在 页 面 加 载 与 单 击 
“请 求 ” 按 钮 时 调用 。 文 件 jsljjs 的 具体 代码 如 下 。 


function $$(id) { 
return document.getElementByld(id); 


) 
var objWorker = new Worker("js1 1.js"); 
// 自 定义 页 面 加 载 时 调用 的 函数 
function pageload(){ 
objWorker.addEventListener('message', 
function(event) ( 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML += event.data; 


) 
false); 


) 
// 自 定义 单 击 “ 请 求 ”按钮 时 调用 的 函数 
function btnSend_Click() { 
// 获 取 发 送 内 容 
var strTxtValue = $$("txtNum").value; 
if (strTxtValue.length > 0) ( 
objWorker.postMessage(strTxtValue); 
$$("txtNum").value = ""; 


) 
在 上 述 JavaScript 文件 js1.js 的 代码 中 ， 通 过 Worker 对 象 调用 了 一 个 后 台 线 程 脚本 文件 js1 Ljs. 


D Android D RISTER HERE 


在 该 文件 中 ， 根 据 获 取 的 位 数 生成 随机 数 并 将 该 数值 返回 前 台 。 文 件 jsl Ljs 的 实现 代码 如 下 。 


self.onmessage - function(event) ( 
var SstrRetHTML = "<span><b> "; 
SIrRetHTML += event.data + " </b> 位 随机 数 为 : <b> "; 
StrRetHTML += RetRndNum(event.data); 
StrRetHTML +=" </b></span><br>"; 
self.postMessage(strRetHTML); 


} 
/| 生成 指定 长 度 的 随机 数 
function RetRndNum(n) ( 
var strRnd = ""; 
for (var intl = 0; intl < n; intl++) { 
strRnd += Math.floor(Math.random() * 10); 


l 
return strRnd; 
) 


在 本 实例 中 ,首先 定义 一 个 后 台 线程 objWorker， 其 脚本 文件 指向 jsl_Ljs， 表 示 由 该 文件 实现 前 台 
请 求 的 操作 。 当 用 户 在 文本 框 中 输入 随机 数 长 度 并 单 击 “ 请 求 ” 按 钮 时 ， 该 输入 的 内 容 通过 调用 线程 
objWorker 对 象 的 postMessage0 方 法 ,发 送 至 脚本 文件 jsl_ljs。 在 脚本 文件 jsl_ljs 中 ,通过 添加 message 
事件 获取 前 台 传 回 的 数据 ， 并 将 该 数据 值 event.data ——— 
作为 自 定义 函数 RetRndNum0 的 实 参 ， 生 成 指定 位 Gre mem WD pee SR Imo mu 0 
数 的 随机 数 ， 并 将 该 随机 数 通过 selfpostMessageO — cer eee ela y ee e 
方法 发 送 至 调用 后 台 线 程 的 前 台 程 序 。 在 前 台 代码 吉本 外 再 
中 ， 通 过 添加 message 事件 获取 后 台 线程 处 理 完成 
后 传 回 的 数据 ， 并 将 数据 的 信息 展示 在 页 面 中 。 虽 
然后 台 线 程 可 以 处 理 前 台 的 代码 ， 但 是 不 允许 后 台 
线程 访问 前 台 页 面 的 对 象 或 元 素 。 如 果 访 问 后 台 线 am 
程 将 报错 ， 它 们 只 限于 进行 数据 上 的 交互 。 

执行 后 的 效果 如 图 13-1 所 示 。 


13.2.2 ”使 用 线程 传递 JSON 对 象 


1E HTML 5 网 页 中 , 可 以 使 用 后 台 线 程 传递 JSON 对 象 。 具 体 方法 是 通过 后 台 线 程 传递 一 个 JSON 
对 象 给 前 台 ， 然 后 前 台 接 收 并 显示 JSON 对 象 内 容 的 方法 。 


K 1" Il 192: 使 用 线程 传递 JSON 对 象 


图 13-1 执行 效果 


源码 路 径 : 光盘 :\codes\13\2.html 


在 本 实例 新 建 的 HIML 5 页 面 中 ， 当 加 载 页 面 时 创建 一 个 Worker 后 台 线程 ， 该 线程 将 返回 给 前 台 
页 面 一 个 JSON 对 象 ， 前 台 获 取 该 JSON 对 象 ， 使 用 遍历 的 方式 显示 对 象 中 的 全 部 内 容 。 
实例 文件 2.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html> 
<html> 


e. 


<head> 
<meta charset="utf-8" /> 
<title> 使 用 线程 传递 JSON 对 象 </title> 
«link href="css.css" rel="stylesheet" type="text/css"> 
«script type-"text/javascript" language-"jscript" 
Src="js2.js"/> 
</script> 
</head> 
«body onLoad="pageload();"> 
<fieldset> 
<legend> 使 用 线程 传递 JSON 对 象 </legend> 
<p id="pStatus"></p> 
</fieldset> 
</body> 
</html> 
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在 上 述 页 面 中 导入 了 一 个 JavaScript 文件 js2.js， 在 里 面 自 定义 了 一 个 函数 pageload(, 在 页 面 加 载 


时 调用 。 文 件 js2.js 的 实现 代码 如 下 。 


function $$(id) ( 
return document.getElementByld(id); 


) 
var objWorker = new Worker("js2 1.js"); 
// 自 定义 页 面 加 载 时 调用 的 函数 
function pageload() ( 
objWorker.addEventListener('message', 
function(event) { 
var strHTML = ""; 
var ev - event.data; 
for (var i in ev) ( 
strHTML +="<span>"+ i € ":" 
strHTML +="<b> " + ev[i] + " </b></span><br>"; 
} 
$$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML = strHTML; 
) 
false); 
objWorker.postMessage(""); 
) 


在 上 述 JavaScript 文件 js2.js 的 代码 中 ， 调 用 了 后 台 线程 脚本 文件 js2_1js， 在 此 文件 中 通过 方法 
postMessage(0 向 前 台 发 送 JSON 对 象 。 文 件 js2 Ljs 的 实现 代码 如 下 。 


var json = { 
姓名 : "约翰 内 斯 堡 "， 
TESI: "S", 
邮箱 : "2222222? (9163.com", 
武器 : "光芒 神 剑 "， 
攻击 值 : "100" 
k 


self.onmessage = function(event) { 
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self. postMessage(json); 
close(); 
} 
在 上 述 代码 中 , 当 加 载 页 面 时 触发 onLoad 事 
件 ， 该 事件 调用 了 pageloadO 函 数 。 该 函数 首先 定 XPD RAO SEV PLO SEQ IAD Wb 
义 一 个 后 台 线 程 对 象 objWorker， 脚 本 文件 指向 。 E e ~ [Gssssscesssx]en] 


j 1js， 并 通过 调用 对 象 的 方法 postMessage0 向 EE ee siio 


使 用 线程 传送 JSON 对 多 Woxills Firefex 


A 使 用 贱 程 传 递 JSON 对 象 
后 台 线 程 发 送 一 个 空 字符 请 求 。 在 后 台 线 程 指向 
文件 js2_ljs 中 ， 先 自 定义 一 个 JSON X json, Lp aet 
当 通 过 message 事件 监测 前 台 页 面 请 求 后 ， 调 用 BB XENA 


方法 selfpostMessage0 向 前 台 代码 传递 JSON 对 
Bo HEH close 语句 关闭 后 台 线程 。 前 台 为 了 在 
message 事件 中 获取 传递 来 的 JSON 对 象 内 容 , 使 
用 for 语句 遍历 了 整个 JSON 对 象 的 内 容 , 并 将 内 
容 显示 在 页 面 中 。 执 行 后 的 效果 如 图 13-2 所 示 。 13-2 执行 效果 


13.2.3 ”使 用 线程 戏 套 交互 数据 


在 后 台 线程 中 还 可 以 继续 调用 线程 ， 实 现 分 割 主 线程 的 功能 ， 并 最 终 形成 线程 嵌 套 处 理 代码 的 格 
局 。 这 种 方式 可 以 将 各 个 功能 块 分 离 ， 形 成 独立 的 子 模块 ， 有 利于 开发 Web 应 用 。 


注意 : 目前 ， 只 有 Firefox 5.0 浏 览 器 支持 这 种 后 台子 线程 庶 套 交互 数据 的 方法 。 


c | 实例 13-3: (HALE V fede ti UR 
- toL] 源码 路 径 : 光盘 :codes\l33hm aaao ul 

本 实例 基于 实例 13-1， 新 添加 了 一 个 显示 随机 数 奇 偶 特 征 的 功能 。 当 用 户 在 页 面 中 输入 生成 随机 数 
的 位 数 并 单 击 “ 请 求 ”按钮 后 ， 不 仅 在 页 面 中 显示 对 应 位 数 的 随机 数 ， 而 且 将 随机 数 的 奇偶 特征 一 起 
显示 在 页 面 中 。 

实例 文件 3.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 

«html» 

<head> 

<meta charset="utf-8" /> 

<title> 使 用 线程 嵌 套 交互 数据 </title> 

«link href-"css.css" rel="stylesheet" type="text/css"> 

«script type-"text/javascript" language-"jscript" 

Src-"js3 js" 

</script> 

</head> 

<body onLoad="pageload();"> 

<fieldset> 

<legend> 线 程 谋 套 请 求 交互 数据 </legend> 
<p id="pStatus"></p> 


e. 
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«input id-"txtNum" type="text" class="inputtxt"> 
«input id-"btnAdd" type="button" value=" 请 求 " 
class-"inputbtn" onClick-"btnSend Click();"» 
</fieldset> 
</body> 
</html> 


在 上 述 HTML 5 页 面 中 导入 了 一 个 JavaScript 文件 js3.js， 在 里 面 自 定义 了 两 个 函数 ， 分 别 供 在 页 
面 加 载 与 单 击 “ 请 求 ”按钮 时 调用 。 文 件 js3.js 的 实现 代码 如 下 。 


function $$(id) { 
return document.getElementByld(id); 


var objWorker = new Worker("js3 1.js"); 
// 自 定义 页 面 加 载 时 调用 的 函数 
function pageload() ( 
objWorker.addEventListener('message', 
function(event) ( 
$S$("pStatus").style.display = "block"; 
$$("pStatus").innerHTML += event.data; 
) 
false); 


} 
// 自 定义 单 击 “ 请 求 ”按钮 时 调用 的 函数 
function btnSend_Click() { 
1/ 获取 发 送 内 容 
var strTxtValue = $$("txtNum").value; 
if (strTxtValue.length > 0) ( 
objWorker.postMessage(strTxtValue); 
$$("txtNum").value = ""; 


) 


在 上 述 JavaScript 文件 js3.js 代码 中 ， 调 用 了 后 台 线 程 脚本 文件 js3_1js， 此 文件 能 够 通过 指定 位 数 
生成 随机 数 。 文 件 js3 Ljs 的 实现 代码 如 下 。 


self.onmessage - function(event) ( 
var intLen = event.data; 
var LngRndNum = RetRndNum(intLen); 
var objWorker = new Worker("js3 1 1.js"); 
objWorker.postMessage(LngRndNum); 
objWorker.onmessage - function(event) ( 
var SstrRetHTML = "<span><b> "; 
StrRetHTML += intLen +" </b> 位 随机 数 为 : <b> "; 
strRetHTML += LngRndNum; 
strRetHTML +=" </b> " + event.data + " </span><br> 
self.postMessage(strRetHTML); 
F 


} 
// 生 成 指定 长 度 的 随机 数 


function RetRndNum(n) { 
var strRnd = ""; 
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for (var intl = 0; intl < n; intl++) ( 
strRnd += Math.floor(Math.random() * 10); 


J 
return strRnd; 


) 


在 上 述 JavaScript 文件 js3 Ljs 代码 中 ， 调 用 了 另外 一 个 后 台 线 程 脚本 文件 js3 1 1js， 此 文件 可 以 
检测 随机 数 奇 偶 的 特征 。 文 件 js3 1 Ljs 的 实现 代码 如 下 。 
self.onmessage - function(event) ( 
if (event.data % 2 == O) ( 
self.postMessage("oushu"); 
}else { 
self.postMessage("jishu"); 
} 
self.close(); 
) 


本 实例 是 以 实例 13-1 为 基础 的 ， 为 了 在 前 台 页 面 中 既 显示 按 指定 位 数 生成 的 随机 数 ， 也 能 够 检测 
随机 数 奇偶 特征 ,在 调用 的 后 台 线程 中 使 用 了 嵌 套 的 方式 来 实现 。 在 脚本 文件 js3.js 中 指定 的 后 台 线 程 
文件 js3 Ljs 为 主线 程 ， 其 运作 流程 如 下 。 

(1) 在 message 事件 中 获取 前 台 页 面 传 来 的 生成 随机 数 的 长 度 值 event.data， 并 保存 至 变量 intLen 中 。 

(2) 根据 该 变量 值 调用 函数 RetRndNum()， 生 成 一 个 指定 长 度 的 随机 数 ， 并 保存 至 变量 LngRnd 
Num 中 。 

G) 创建 一 个 后 台子 线程 对 象 objWorker， 并 指定 该 对 象 的 脚本 文件 为 js3_1 1js， 通 过 方法 
postMessage() 将 生成 的 随机 数 发 送 给 objWorker 对 象 对 应 的 脚本 文件 。 

子 线程 文件 js3_1 Ljs 的 功能 是 通过 监测 message rr 
事件 获取 event.data 值 , 得 到 主线 程 传 回 的 随机 数 ， CEE CCELI 
并 通过 event.data%2 的 方法 检测 随机 数 的 奇偶 性 ， c|[ 国 -5x 月 [@ 吉 全 | 
通过 postMessage() 方 法 返回 给 主线 程 。 主 线程 MRFEATZSER 
js3 ljs 文件 在 监测 的 message 事件 中 接收 子 线程 
传 回 的 随机 数 奇偶 特征 , 与 生成 的 随机 数 一 起 组 成 


1 位 随机 数 为 : 5 jishu 
13 OMUR: 2180712634067 jishu 
2 位 请 i 25 jishu 


一 个 字符 串 ， 通 过 selfpostMessage() 方 法 将 字符 串 d cd emen E 
传递 给 前 台 页 面 。 前 台 页 面 在 监测 的 message 事件 机 
中 ， 获 取 后 台 主线 程 传 回 的 数据 event.data, Bldg = 一 
字符 串 内 容 显示 在 页 面 中 。 人 — 
执行 后 的 效果 如 图 13-3 所 示 。 - 
在 此 需要 说 明 的 是 ， 主 线程 向 子 线程 发 送 数据 图 13-3 执行 效果 


时 ， 使 用 子 线程 对 象 的 postMessage0 方 法 ， 即 objWorker. postMessage(LngRndNum); 而 在 向 前 台 页 面 发 送 
数据 时 ， 则 使 用 线程 自身 的 postMessage0 方 法 ， 即 self postMessage(strRetHTML), 5X tn] DA 486 self. 


13.24 通过 JSON 发 送 消息 
众所周知 ，Web Workers 可 以 通过 Message Channels 进行 通信 。 虽 然 在 大 多 数 情况 下 ， 我 们 会 发 


e. 
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送 更 加 结构 化 的 数据 给 Workers。 但 是 使 用 JSON 格式 是 唯一 可 以 给 Worker 发 送 结构 化 消息 的 方法 。 
幸运 的 是 ， 浏 览 器 现在 支持 Worker 的 程度 已 经 与 原生 支持 JSON 的 程度 一 样 好 了 。 


| 实例 134; 通过 JSON 发 送 消息 


- -源码 路 径 : 光盘 :codes\l3Mhml OOO 

在 本 实例 中 编写 另 一 个 WorkerMessage 类 型 的 对 象 ， 这 种 类 型 将 被 用 来 向 Web Workers 发 送 一 些 
带 参数 的 命令 。 

实例 文件 4.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html> 
<html> 
<head> 
<title>Hello Web Workers</title> 
</head> 
<body> 
<input id=inputForWorker /> 
<button id=btnSubmit>Send to the worker</button> 
<button id=killWorker>Stop the worker</button> 
«div id="output"></div> 
<script src-"js4.js" type="text/javascript"></script> 
</body> 
</html> 


脚本 文件 js4.js 的 具体 代码 如 下 。 


function WorkerMessage(cmd, parameter) ( 
this.cmd = cmd; this.parameter = parameter; 


} 

// 显 示 输出 部 分 

var output = document.getElementByld("output"); 

/* Checking if Web Workers are supported by the browser */ 

if (window. Worker) { 

// 被 引用 到 其 他 3 个 元 素 

var btnSubmit = document.getElementByld("btnSubmit"); 

var inputForWorker = document.getElementByld("inputForWorker"); 
var killWorker = document.getElementByld("killWorker"); 

var myHelloWorker = new Worker('helloworkers)SON EN.js"); 
myHelloWorker.addEventListener("message", function (event) { 
. output.textContent = event.data; 

}, false); 

/发 送 初始 化 命令 

myHelloWorker.postMessage(new WorkerMessagef('init', null)); 
/添加 的 提交 按钮 单 击 事件 

/发 送信 息 

_btnSubmit.addEventListener("click", function (event) { 

/Were now sending messages via the 'hello' command 
myHelloWorker.postMessage(new WorkerMessage(hello', inputForWorker.value)); 
}, false); 

TR B 6n S ch SR 
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/which will stop the worker. It won't be usable anymore after that 

killWorker.addEventListener("click", function (event) ( 

myHelloWorker.terminate(); 

output.textContent = "The worker has been stopped."; 

}, false); 

}else { 

_Output.innerHTML = "Web Workers are not supported by your browser. Try with IE10: «a href=\"http://ie.microsoft. 
com/testdriveV»download the latest IE10 Platform Preview«/a»"; 

) 


在 上 述 JavaScript 代码 中 , 使 用 了 一 种 非 侵入 式 的 JavaScript 方法 来 帮助 我 们 分 离 表 现 层 和 逻辑 层 。 
执行 后 的 效果 如 图 13-4 所 示 。 


文件 四 RED FV PrO PEV IAV Wb 
x Ex lE Dr eee £zenserintes] ne n x |> + - 


€ D nuns @ m-ar Alloh fà m.s - 
Hn Send to the worker | Stop the worker 
Hello 111 from a separate thread! 

图 13-4 执行 效果 


13.3 ”执行 大 计算 量 任务 


Gu 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 13 章 \ 执 行 大 计算 量 任务 .avi 

众多 程序 员 ， 特 别 是 游戏 程序 员 ， 一 直 致 力 于 寻求 一 种 高 性 能 的 图 形 泻 染 方法 ， 以 便 将 其 用 于 最 
终 的 游戏 。 而 路 径 查 找 则 是 一 个 非常 有 用 的 功能 , 可 以 用 于 创建 道路 或 显示 角色 从 A 点 到 B 点 的 过 程 。 
也 就 是 说 ， 路 径 查找 算法 就 是 要 在 n 维 〈 通 常 是 2D 或 3D) 空间 中 找 出 两 点 间 的 最 短路 线 。 

处 理 路 径 查 找 的 一 种 最 佳 算 法 叫做 A*， 是 迪 杰 斯 特 拉 (Dijkstra) 算 法 的 变 体 。 路 径 查 找 (或 者 类 
似 的 计算 时 间 超 过 数 毫秒 的 操作 ) 的 问题 在 于 ， 它 们 会 导致 JavaScript 产生 一 种 名 为 “界面 锁定 ”的 效 
果 ， 也 就 是 在 操作 完成 以 前 ， 浏 览 器 将 一 直 被 冻结 。 幸 运 的 是 ，HTML 5 规范 也 提供 了 一 个 名 为 Web 
Workers. 的 新 API。Web Workers (通常 称 为 Worker) 允许 在 后 台 执行 计算 量 相对 较 大 以 及 时 间 较 长 的 
脚本 ， 而 不 会 影响 浏览 器 的 主 用 户 界 面 。 

创建 Worker 的 语法 格式 如 下 。 


var worker = new Worker(PATH TO A JS SCRIPT); 


HH, PATH TO A JS SCRIPT 可 以 是 一 个 脚本 文件 ， 如 astarjs。 在 创建 了 Worker 之 后 ， 随 时 
可 以 调用 worker.close0 终 止 它 的 执行 。 如 果 终 止 了 一 个 Worker， 然 后 又 需要 执行 一 个 新 操作 ， 那 么 就 
要 再 创建 一 个 新 的 Worker 对 象 。 在 Web Workers 之 间 的 通信 ， 是 通过 在 worker.onmessage 事件 的 回调 
函数 中 调用 worker.postMessage(object) 来 实现 的 .此 外 ,还 可 以 通过 onerror 事件 处 理 程序 来 处 理 worker 
的 错误 。 与 普通 的 网 页 类 似 ，Web Workers 也 支持 引入 外 部 脚本 ， 使 用 的 是 importScriptsQP Zt. HER 


e. 


re | 实例 13-5. 使 用 Web Workers API 执行 大 计算 量 任务 


源码 路 径 : 光盘 :\codes\13\5.html 


在 本 实例 的 HTML 5 页 面 中 , 定义 了 一 个 用 JavaScript 实现 的 A* 算法 , 在 实现 过 程 中 使 用 了 Web 
Workers。 实 例文 件 5.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 

<html lang="en"> 

<head> 

<meta charset="UTF-8" /> 
<title> 使 用 web workers)</title> 
<script> 

window.onload = function () { 
var tileMap = []; 

var path = ( 

start: null, 

stop: null 

) 

var tile = ( 

width: 6, 

height: 6 

) 

var grid = ( 

width: 100, 

height: 100 

) 

var canvas = document.getElementByld('myCanvas"); 
canvas.addEventListener('click', handleClick, false); 
var c = canvas.getContext('2d"); 
/随机 生成 1000 个 元 素 

for (vari = 0; i < 1000; i++) { 
generateRandomElement(); 


} 

/| 绘制 整个 网 格 

draw(); 

function handleClick(e) { 

/检测 到 鼠标 单 击 后 ， 把 鼠标 坐标 转换 为 像素 坐标 
var row = Math .floor((e.clientX - 10) / tile.width); 

var column = Math.floor((e.clientY - 10) / tile.height); 
if (tileMap[row] == null) { 

tileMap[row] = []; 


5 
if (tleMap[row][column] !== 0 && tileMap[row][column] !== 1) ( 


tileMap[row][column] = 0; 

if (path.start === null) { 
path.start = (x: row, y: column]; 
}else { 

path.stop = {x: row, y: column}; 


第 13 & 使 用 Web Workers API 


数 可 以 接受 0 个 或 多 个 参数 ， 如 果 有 参数 ， 每 个 参数 都 应 该 是 一 个 JavaScript 文件。 
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callWorker(path, processWorkerResults); 
path.start = null; 

path.stop = null; 

) 

draw(); 

) 

} 

function callWorker(path, callback) { 
var w = new Worker(js5.js"); 
w.postMessage(( 

tileMap: tileMap, 

grid: ( 

width: grid.width, 

height: grid.height 

b 

start: path.start, 

Stop: path.stop 

D: 

w.onmessage = callback; 

) 

function processWorkerResults(e) ( 

if (e.data.length > 0) ( 

for (var i = 0, len = e.data.length; i < len; i++) ( 
if (tileMap[e.data[i].xX] === undefined) ( 
tileMap[e.data[i].x] = 
) 
tileMap[e.data[i].x]e.data[i].y] = 0; 

) 

} 

draw(); 

} 

function generateRandomElement() { 

var rndRow = Math.floor(Math.random() * (grid.width + 1)); 
var rndCol = Math.floor(Math.random() * (grid.height + 1)); 
if (tileMap[rmdRow] == null) ( 

tileMap[rndRow] = [I; 

} 

tileMap[rndRow][mdCol] = 1; 

) 

function draw(srcX, srcY, destX, destY) ( 

SrcX = (srcX undefined) ? 0 : srcX; 

SrcY = (srcY undefined) ? 0 : srcY; 

destX = (destX === undefined) ? canvas.width : destX; 
destY = (destY === undefined) ? canvas.height : destY; 
c.fillStyle = 'FFFFFF'; 

c.fillRect (srcX, srcY, destX 1, destY 1); 

c.fillStyle = '#000000'; 

var startRow = 0; 

var startCol = 0; 

var rowCount = startRow + Math.floor(canvas.width / tile. width) + 1; 
var colCount = startCol + Math.floor(canvas.height / tile.height) + 1; 
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rowCount = ((startRow + rowCount) > grid.width) ? grid.width : rowCount; 
colCount = ((startCol + colCount) > grid.height) ? grid.height : colCount; 
for (var row = startRow; row < rowCount; row) ( 

for (var col = startCol; col < colCount; col++) { 

var tilePositionX = tile.width * row; 

var tilePositionY = tile.height * col; 

if (tilePositionX >= srcX && tilePositionY >= srcY && 

tilePositionX <= (srcX + destX) && 

tilePositionY <= (srcY + destY)) ( 

if (tileMap[row] != null && tileMap[row][col] != null) ( 

if (tileMap[row][col] == 0) ( 

cfillStyle = '#CC0000'; 

}else { 

c.fillStyle = '#0000FF'; 

) 

c.fillRect(tilePositionX, tilePositionY, tile.width, tile.height); 

}else { 

c.strokeStyle = '#CCCCCC'; 

Cc.strokeRect(tilePositionX, tilePositionY, tile.width, tile.height); 


</script> 

</head> 

<body> 

<canvas id="myCanvas" width="600" height="300"></canvas> 
«br /> 

</body> 

</html> 


脚本 文件 js5jjs 的 具体 代码 如 下 。 


// 此 worker 处 理 负责 aStar 类 的 实例 

onmessage - function(e)( 

var a = new aStar(e.data.tileMap, e.data.grid.width, e.data.grid.height, e.data.start, e.data.stop); 
postMessage(a); 


} 

// 基 于 非 连续 索引 的 tileMap 调整 后 的 A* 路 径 查 找 类 

var aStar - function(tileMap, gridW, gridH, src, dest, createPositions) ( 
this.openList = new NodeList(true, 'F'); 

this.closedList = new NodeList(); 

this.path = new NodeList(); 

this.src = src; 

this.dest = dest; 

this.createPositions = (createPositions === undefined) ? true : createPositions; 
this.currentNode - null; 

var grid ={ 

TOWS: gridW, 
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cols: gridH 

) 

this.openList.add(new Node(null, this.src)); 

while (Ithis.openList.isEmpty()) ( 

this.currentNode = this.openList.get(0); 

this.currentNode visited = true; 

if (this.checkDifference(this.currentNode, this.dest)) ( 
/到 达 目 的 地 

break; 

) 

this.closedList.add(this.currentNode); 
this.openList.remove(0); 

/检查 与 当前 节点 相近 的 8 个 元 素 

var nstart ={ 
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X: (((this.currentNode.x - 1) >= 0) ? this.currentNode.x - 1 : 0), 
y: (((this.currentNode.y - 1) >= 0) ? this.currentNode.y - 1 : 0), 
) 

var nstop = ( 

X: (((this.currentNode.x + 1) <= grid.rows) ? this.currentNode.x + 1 : grid.rows), 
y: (((this.currentNode.y + 1) <= grid.cols) ? this.currentNode.y + 1 : grid.cols), 
) 

for (var row = nstart.x; row <= nstop.x; row) ( 

for (var col = nstart.y; col <= nstop.y; col++) ( 

/在 原始 的 tileMap 中 还 没有 行 ， 是 否 继续 


if (tleMap[row] === undefined) ( 

if (Ithis.createPositions) ( 

continue; 

) 

// 检 查 建 筑 物 或 其 他 障碍 物 

if (tileMap[row] !== undefined && tileMap[row][col] === 1) ( 
continue; 

) 


var element = this.closedList.getByXY (row, col); 
if (element !== null) ( 

// 这 个 元 素 已 经 在 closedList 中 

continue; 

}else { 

element = this.openList.getByXY (row, col); 

if (element !== null) { 

// 这 个 元 素 已 经 在 closedList 中 

continue; 


} 


} 

// 还 不 在 任何 列表 中 ， 继 续 

var n = new Nodel(this.currentNode, (x: row, y: col}); 
n.G = this.currentNode.G + 1; 

n.H = this.getDistance(this.currentNode, n); 

n.F 2 n.G * n.H; 

this.openList.add(n); 
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} 

} 

} 

while (this.currentNode.parentNode !== null) ( 
this.path.add(this.currentNode); 

this.currentNode = this.currentNode.parentNode; 
) 

) 

aStar.prototype.checkDifference = function(src, dest) ( 
return (src.x === dest.x && src.y === dest.y); 

) 

aStar.prototype.getDistance = function(src, dest) ( 
return Math.abs(src.x - dest.x) + Math.abs(src.y - dest.y); 
) 

function Node(parentNode, src) ( 
this.parentNode = parentNode; 

this.x = src.x; 

this.y 7 src.y; 

this.F = 0; 

this.G = 0; 

this.H = 0; 

) 

var NodeList = function(sorted, sortParam) ( 
this.sort = (sorted === undefined) ? false : sorted; 
this.sortParam = (sortParam === undefined) ? 'F' : sortParam; 
this.list = []; 

this.coordMatrix = [J; 

) 

NodeList.prototype.add = function(element) ( 
this.list.push(element); 

if (this.coordMatrix[element.x] === undefined) ( 
this.coordMatrix[element.x] = []; 

} 

this.coordMatrix[element.x][element.y] = element; 
if (this.sort) ( 

var sortBy = this.sortParam; 
this.list.sort(function(o1, 02) ( return o1[sortBy] - o2[sortBy]; )); 
) 

) 

NodeList.prototype.remove - function(pos) ( 
this.list.splice(pos, 1); 

) 

NodeList.prototype.get = function(pos) ( 

return this.list[pos]; 

) 

NodeList.prototype.size = function() ( 

return this.list.length; 

) 

NodeList.prototype.isEmpty = function() { 

return (this.list.length == 0); 

) 
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NodeList.prototype.getByXY - function(x, y) ( 
if (this.coordMatrix[x] === undefined) ( 
return null; 

}else { 

var obj = this.coordMatrix[x][y]; 

if (obj == undefined) { 

return null; 

}else { 

return obj; 

) 

) 


) 
NodeList.prototype.print = function() ( 


for (var i = 0, len = this.list.length; i < len; i++) ( 
console.log(this.list[i].x + ' ' + this.list[i]. y); 


) 
执行 后 的 效果 如 图 13-5 所 示 。 


图 13-5 执行 效果 


第 3 篇 jQuery Mobile 篇 
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第 14 章 jQuery Mobile 基础 


jQuery Mobile 不 仅 会 给 主流 移动 平台 带 来 jQuery 核心 库 , 而 且 会 发 布 一 个 完整 统一 的 jQuery 移动 
UI 框架 ， 支 持 全 球 主流 的 移动 平台 。 当 前 的 移动 Web 需要 这 个 跨 浏 览 器 的 框架 jQuery Mobile， 从 而 
能 够 让 开发 人 员 开 发 出 真正 的 移动 Web 网 站 。 本 章 将 详细 讲解 jQuery Mobile 的 基本 知识 ， 为 读者 步 
入 本 书后 面 知 识 的 学 习 打 下 基础 。 


14.1 jQuery Mobile 简介 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 14 章 jQuery Mobile 简介 .avi 
jQuery Mobile 是 jQuery 在 手机 和 平板 设备 上 的 版 本 ， 本 节 将 详细 讲解 jQuery 的 基本 知识 和 特点 ， 
为 读者 步 入 本 书后 面 知识 的 学 习 打 下 基础 。 


14.1.1 jQuery 介绍 


jQuery 是 继 prototype 之 后 又 一 个 优秀 的 JavaScript 框架 。 它 是 轻 量 级 的 JS 库 ， 兼 容 CSS 3, X63 
容 各 种 浏览 器 (IE 6.0+, Firefox 2+, Safari 2.0+、Opera 9.04) , jQuery 2.0 及 后 续 版 本 将 不 再 支持 IE 6/7/8 
浏览 器 。jQuery 使 用 户 能 更 方便 地 处 理 HTML Documents、Events， 实 现 动画 效果 ， 并 且 方 便 地 为 网 站 
提供 Ajax 交互 。 jQuery 还 有 一 个 比较 大 的 优势 是 , 它 的 文档 说 明 很 全 , 而 且 各 种 应 用 也 介绍 得 很 详细 ， 
同时 还 有 许多 成 熟 的 插件 可 供 选择 。 jQuery 能 够 使 用 户 的 HTML 页 面 保持 代码 和 HTML 内 容 分 离 , 也 
就 是 说 ， 不 用 再 在 HTML 中 插入 一 堆 JS 来 调用 命令 了 ， 只 需 定义 ID 即 可 。 

jQuery 是 一 个 兼容 多 浏览 器 的 JavaScript 库 ， 核 心理 念 是 write less, do more 〈 写 得 更 少 ， 做 得 更 
多 ) 。jQuery 在 2006 年 1 月 由 美国 人 John Resig 在 纽约 的 barcamp 发 布 ， 吸 引 了 来 自 世 界 各 地 的 众多 
JavaScript 高 手 加 入 ， 由 Dave Methvin 率领 团队 进行 开发 。 如 今 ，jQuery 已 经 成 为 最 流行 的 JavaScript 
库 ， 在 世界 前 10000 个 访问 最 多 的 网 站 中 ， 有 超过 55% 在 使 用 jQuery。 

jQuery 是 免费 、 开 源 的 ， 使 用 MIT 许可 协议 。jQuery 的 语法 设计 可 以 使 开发 者 更 加 便捷 ， 例 如 操 
作文 档 对 象 、 选 择 DOM 元 素 、 制 作 动画 效果 、 事 件 处 理 、 使 用 Ajax 以 及 其 他 功能 。 除 此 以 外 ，jQuery 
提供 API 让 开发 者 编写 插件 。 其 模块 化 的 使 用 方式 使 开发 者 可 以 很 轻松 地 开发 出 功能 强大 的 静态 或 动 
态 网 页 。 


jQuery 的 特点 如 下 。 

加 ”动态 特效 。 

M Ajax. 

回 ”通过 插件 来 扩展 。 

加 ”方便 的 工具 ， 例 如 浏览 器 版 本 判断 。 
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ED ”渐进 增强 。 

Ep ” 链 式 调用 。 

回 多 浏览 器 支持 , 支持 正 6.0+ (在 2.0.0 中 取消 了 对 正 6—IE 8 的 支持 )、Opera 9.0+、 Firefox 2+, 
Safari 2.0+、Chrome 1.0+。 


14.1.2. jQuery Mobile 的 特点 


到 目前 为 止 ，jQuery 驱动 着 Intemet 上 的 大 量 网 站 ， 在 浏览 器 中 提供 动态 用 户 体验 ， 促 使 传统 桌 
面 应 用 程序 越 来 越 少 。 现 在 ， 主 流 移动 平台 上 的 浏览 器 功能 已 赶 上 了 桌面 浏览 器 ， 因 此 jQuery 团队 引 
入 了 jQuery Mobile (简称 为 JQMD . jQuery Mobile 的 使 命 是 向 所 有 主流 移动 浏览 器 提供 一 种 统一 体验 ， 
使 整个 Internet 上 的 内 容 更 加 丰富 ， 不 管 使 用 哪 种 查看 设备 。 
jQuery Mobile 的 目标 是 在 一 个 统一 的 UI 中 交付 超级 JavaScript 功能 ， 跨 最 流行 的 智能 手机 和 平板 
电脑 设备 工作 。 与 jQuery 一 样 ，jQuery Mobile 是 一 个 在 Internet 上 直接 托管 、 免 费 可 用 的 开源 代码 基 
础 。 事实 上 ， 当 jQuery Mobile 致力 于 统一 和 优化 这 个 代码 基 时 ，jQuery 核心 库 受到 了 极 大 关注 。 这 种 
关注 充分 说 明 ， 移 动 浏览 器 技术 在 极 短 的 时 间 内 取得 了 多 么 大 的 发 展 。 
与 jQuery 核心 库 一 样 ， 开 发 计算 机 上 不 需要 安装 任何 东西 ， 只 需 将 各 种 *.js 和 *.css 文件 直接 包含 
到 Web 页 面 中 即 可 。 这 样 ，jQuery Mobile 的 功能 就 可 以 供 设计 者 和 开发 者 随时 使 用 。 
jQuery Mobile 的 基本 特点 如 下 。 
(1) 一 般 简单 性 。 
此 框架 简单 易 用 。 页 面 开 发 主要 使 用 标记 ， 无 需 或 仅 需 很 少 JavaScript。 
(20 持续 增强 和 优雅 降级 。 
尽管 jQuery Mobile 利用 最 新 的 HTML 5、CSS 3 和 JavaScript， 但 并 非 所 有 移动 设备 都 提供 这 样 的 
支持 。jQuery Mobile 的 哲学 是 同时 支持 高 端 和 低 端 设备 ， 如 对 没有 JavaScript 支持 的 设备 ， 尽 量 提供 
最 好 的 体验 。 
(3) Accessibility。 
jQuery Mobile 在 设计 时 考虑 了 访问 能 力 , 它 拥 有 Accessible Rich Internet Applications (WAI-ARIA) 
支持 ， 以 帮助 使 用 辅助 技术 的 残障 人 士 访问 Web 页 面 。 
(4) 小 规模 。 
jQuery Mobile 框架 的 整体 大 小 比较 小 ，JavaScript 库 12KB，CSS 6KB， 还 包括 一 些 图 标 。 
(5) 主题 设置 。 
此 框架 还 提供 一 个 主题 系统 ， 允 许 用 户 提 供 自 己 的 应 用 程序 样式 。 


14.1.3 ”对 浏览 器 的 支持 


虽然 在 移动 设备 浏览 器 支持 方面 取得 了 长 足 的 进步 , 但 是 并 非 所 有 移动 设备 都 支持 HTML 5、CSS 3 
和 JavaScript。 这 个 领域 是 jQuery Mobile 的 持续 增强 (Progressive Enhancement). 和 优雅 降级 支持 发 挥 
作用 的 地 方 。 持 续 增强 包含 如 下 所 示 的 核心 原则 。 

回 所 有 浏览 器 都 应 该 能 够 访问 全 部 基础 内 容 。 

回 ”所 有 浏览 器 都 应 该 能 够 访问 全 部 基础 功能 。 
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增强 的 布局 由 外 部 链接 的 CSS 提供 。 

增强 的 行为 由 外 部 链接 的 JavaScript 提供 。 

终端 用 户 浏览 器 偏好 应 受到 尊重 。 

所 有 基本 内 容 应 该 (按照 设计 ) 在 基础 设备 上 进行 泻 染 ， 而 更 高 级 的 平台 和 浏览 器 将 使 用 额 
外 的 、 外 部 链接 的 JavaScript 和 CSS 持续 增强 。 
目前 jQuery Mobile 支持 如 下 所 示 的 移动 平台 。 

Apple iOS: iPhone. iPod Touch, iPad (所 有 版 本 )。 
Android: 所 有 设备 〈 所 有 版 本 )。 

BlackBerry Torch (版 本 6)。 

Palm WebOS Pre、Pixi。 

Nokia N900 (进程 中 )。 


ARAARA 


ARARA 
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前 面 已 经 讲解 了 jQuery Mobile 的 基本 特点 。 其 实在 jQuery Mobile 的 众多 特点 中 ,有 非常 重要 的 
4 个 特性 : 跨 平台 的 UI、 简 化 标记 的 驱动 开发 、 渐 进 式 增强 、 响 应 式 设 计 。 本 节 将 简要 讲解 上 述 4 个 
特性 。 


14.2.1. ” 跨 所 有 移动 平台 的 统一 UI 


通过 采用 HTML 5 和 CSS 3 标准 , jQuery Mobile 提供 了 一 个 统一 的 用 户 界面 (User Interface; UD o 
移动 用 户 希望 他 们 的 用 户 体 验 能 够 在 所 有 平台 上 保持 一 致 。 然 而 ， 通 过 比较 iPhone 和 Android 上 的 本 
地 Twitter app 可 发 现 用 户 体 验 并 不 统一 。jQuery Mobile 应 用 程序 解决 了 这 种 不 一 致 性 ， 提 供给 用 户 一 
个 与 平台 无 关 的 用 户 体验 ， 而 这 正 是 用 户 熟 悉 和 期 待 的 。 此 外 ， 统 一 的 用 户 界面 还 会 提供 一 致 的 文档 、 
屏幕 截图 和 培训 ， 而 不 管 终端 用 户 使 用 的 是 什么 平台 。 

jQuery Mobile 也 有 助 于 消除 为 特定 设备 自 定 义 UI 的 需求 。 一 个 jQuery Mobile 代码 库 可 以 在 所 有 
支持 的 平台 上 呈现 出 一 致 性 ， 而 且 无 须 进行 自 定义 。 与 为 每 个 OS 提供 一 个 本 地 代码 库 的 组 织 结构 相 
比 ， 这 是 一 种 费用 非常 低廉 的 解决 方案 。 而 且 就 支持 和 维护 成 本 而 言 ， 从 长 远 来 看 支持 一 个 单一 的 代 
码 库 也 颇具 成 本 效益 。 


14.2.2 ”简化 标记 的 驱动 开发 


jQuery Mobile 页 面 是 使 用 HTML 5 标记 设计 (styled) 的 。 除了 在 HTML 5 中 新 引入 的 自 定义 数据 
属性 之 外 ， 其 他 一 切 对 Web 设计 人 员 和 开发 人 员 来 讲 都 很 熟悉 。 如 果 已 经 很 熟悉 HTML 5， 则 转移 到 
jQuery Mobile 应 是 一 个 相对 无 颖 的 转换 。 就 JavaScript 和 CSS 而 言 ，jQuery Mobile 在 默认 情况 下 承担 
了 所 有 负担 。 但 是 在 有 些 情况 下 , 仍然 需要 依赖 JavaScript 来 创建 更 为 动态 的 或 增强 的 页 面体 验 。 除 了 
设计 页 面 时 用 到 的 标记 具有 简洁 性 之 外 ，jQuery Mobile 还 可 以 迅速 地 原型 化 用 户 界面 。 开 发 者 可 以 迅 
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速 创建 功能 页 面 、 转换 和 插件 (widget) 的 静态 工作 流 ， 从 而 通过 最 少 的 付出 让 用 户 看 到 活生生 的 原型 。 
14.2.3 ”渐进 式 增强 


jQuery Mobile 可 以 为 一 个 设备 呈现 出 可 能 是 最 优雅 的 用 户 体验 ，jQuery Mobile 可 以 呈现 出 应 用 了 
完整 CSS 3 样式 的 控件 。 尽 管 从 视觉 上 来 讲 ，C 级 的 体验 并 不 是 最 吸引 人 的 ， 但 是 它 可 以 演示 平稳 降 
级 的 有 效 性 。 随 着 用 户 升级 到 较 新 的 设备 ，C 级 浏览 器 市 场 最 终 会 减 小 。 但 是 在 C 级 浏览 器 退出 市 场 
之 前 ， 当 运行 jQuery Mobile App 时 ， 仍 然 可 以 得 到 实用 的 用 户 体验 。 

A 级 浏览 器 支持 媒体 查询 ， 而 且 可 以 从 jQuery Mobile CSS 3 样式 styling). 中 呈现 出 可 能 是 最 佳 
的 体验 。2C 级 浏览 器 不 支持 媒体 查询 ， 也 无 法 从 jQuery Mobile 中 接收 样式 增强 。 

本 地 应 用 程序 并 不 能 总 是 平稳 地 降级 。 在 大 多 数 情况 下 , 如 果 设 备 不 支持 本 地 App 特性 (feature) , 
甚至 不 能 下 载 Appo Plin, iOS 5 中 的 一 个 新 特性 是 iCloud 存储 ， 这 个 新 特性 使 多 个 设备 间 的 数据 同步 
更 为 简化 。 出 于 兼容 性 考虑 ， 如 果 创 建 了 一 个 包含 这 个 新 特性 的 OS App， 则 需要 将 App 的 minimum 
allowed SDK (人 允许 的 最 低 SDK) 设置 为 5.0。 当 App 出 现在 App Store 中 时 ， 只 有 运行 iDS 5.0 或 者 更 
高 版 本 的 用 户 才能 看 到 。 在 这 一 方面 ，jQuery Mobile 应 用 程序 更 具 灵 活性 。 


14.24 响应 式 设计 


jQuery Mobile UI 可 以 根据 不 同 的 显示 尺寸 来 呈现 。 例 如 ， 同 一 个 UI 会 恰如其分 地 显示 在 手机 或 
更 大 的 设备 上 ， 如 平板 电脑 、 台 式 机 或 电视 。 


1. 一 次 构建 ， 随 处 运行 


构建 一 个 可 用 于 所 有 消费 者 (手机 、 台 式 机 和 平板 电脑 ) 的 应 用 程序 是 完全 有 可 能 的 。Web 提供 
了 一 个 通用 的 分 发 方式 ，jQuery Mobile 提供 了 跨 浏览 器 的 支持 。 例 如 ， 在 较 小 的 设备 上 可 以 使 用 带 有 
简要 内 容 的 小 图 片 ， 而 在 较 大 的 设备 上 则 可 以 使 用 带 有 详细 内 容 的 较 大 图 片 。 如 今 ， 具 有 移动 呈现 功 
能 (mobile presence) 的 大 多 数 系统 通常 都 支持 桌面 式 Web 和 移动 站 点 。 在 任何 时 候 ， 只 要 必须 支持 

个 应 用 程序 的 多 个 分 发 版 本 ， 就 会 造成 浪费 。 系 统 根据 自己 的 需要 支持 移动 呈现 ， 以 避免 浪费 ， 会 

促成 “一 次 构建 、 随 处 运行 ”得 以 实现 。 

在 某 些 情况 下 ，jQuery Mobile 可 以 为 用 户 创 建 响应 式 设 计 。 下 面 讲解 jQuery Mobile 的 响应 式 设 计 
如 何 良 好 地 应 用 于 竖 屏 〈portrait) 模式 和 横 屏 〈landscape) 模式 中 的 表单 字段 。 例 如 在 竖 屏 视图 中 ， 
标签 位 于 表单 字段 的 上 面 。 而 将 设备 横 屏 放置 时 ， 表 单字 段 和 标签 并 排 显 示 。 这 种 响应 式 设计 可 以 基 
于 设备 可 用 的 屏幕 真实 状态 提供 最 合用 的 体验 。jQuery Mobile 为 用 户 提供 了 很 多 这 样 优秀 的 UX (用 
户 体验 ) 操作 方法 ， 而 且 不 需要 用 户 付出 半分 力气 。 

2. 可 主题 化 的 设计 

jQuery Mobile 提供 了 可 主题 化 的 设计 ， 人 允许 设计 人 员 快 速 地 重新 设计 自己 的 UI。 在 默认 情况 下 ， 
jQuery Mobile 提供 了 5 个 可 主题 化 的 设计 ， 而 且 可 以 灵活 地 互 换 所 有 组 件 的 主题 ， 其 中 包括 页 面 、 标 
题 、 内 容 和 页 脚 组 件 。 创 建 自 定义 主题 最 有 用 的 工具 是 ThemeRoller。 

利用 可 主题 化 的 设计 可 以 轻易 地 重新 设计 一 个 UI。 例如 , 可 以 迅速 采用 jQuery Mobile 应 用 程序 的 
一 个 默认 主题 ， 然 后 在 几 秒 钟 内 使 用 另外 一 个 内 置 的 主题 来 重新 设计 默认 主题 。 唯 一 需要 添加 的 一 个 
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标记 是 data-theme 属性 。 


<l--Set the lists background to black--> 
«ul data-role-"listview"data-inset-"true" data-theme-"a" 


3. 


可 访问 性 


jQuery Mobile App 在 默认 情况 下 是 508〈 是 一 项 联邦 规则 ， 它 要 求 应 用 程序 必须 可 以 让 残疾 人 用 
户 来 访问 。 移 动 Web 上 最 常 使 用 的 辅助 技术 是 屏幕 阅读 器 ) 兼容 的 ， 这 是 一 个 对 任何 人 来 说 都 很 有 价 
值 的 特点 。 尤 其 是 政府 或 国家 机 构 要 求 他 们 的 应 用 程序 必须 是 100% 可 以 访问 的 。 而且， 移动 屏幕 阅读 


器 的 使 用 


量 正在 逐年 增长 。 据 WebAIMS 报道 ，66.7% 的 屏幕 阅读 器 用 户 都 在 他 们 的 移动 设备 上 使 用 屏 


幕 阅读 器 。 


注意 : 如 果 想 知道 你 的 移动 站 点 是 否 是 508 兼 容 的 ， 可 以 使 用 WAVE 6 来 进行 评估 。 如 果 读者 有 兴趣 查看 现 
有 的 jQuery Mobile 应 用 程序 ， 可 以 查看 在 线 jQuery Mobile Gallary (地 址 为 http://www.jqmgallery. 
com) ， 它 可 以 激发 我 们 的 想法 和 灵感 。 
除了 使 用 WAVE 来 测试 移动 App 的 可 访问 性 之 外 ， 通 过 使 用 真实 的 辅助 技术 来 实际 测试 移动 Web 应 
用 程序 ， 也 是 很 有 价值 的 。 
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.3 ”实战 演练 一 一 在 Android 中 使 用 jQuery 设计 网 页 


Chu 知识 点 讲解 : 光盘 \ 视 频 讲解 第 14 章 \ 在 Android 中 使 用 jQuery 设计 网 页 .avi 

jQuery 的 语法 是 为 HTML 元 素 的 选取 编制 的 ， 可 以 对 元 素 执行 某 些 操作 。 基 础 语法 格式 如 下 。 
$(selector).action() 

参数 说 明 如 下 。 


[ral 
[ral 
M 


$: XE X. jQuery. 
selector: 查询 和 查找 HTML 元 素 。 
action): 执行 对 元 素 的 操作 。 


例如 下 面 的 代码 : 


S(this).hide() /隐藏 当前 元 素 

$("p").hide() // 隐 藏 所 有 段落 
$("p.test").hide() /隐藏 所 有 class-"test" 的 段落 
$("#est").hide() /隐藏 所 有 id="test" 的 元 素 


在 接 下 来 的 内 容 中 ， 通 过 一 段 简单 的 代码 来 让 读者 认识 jQuery 的 强大 功能 。 具 体 代码 如 下 。 


<html> 
<head> 
«script type-"text/javascript" src="/jquery/jquery.js"></script> 
«script type-"text/javascript^ 
S$(document).ready(function()( 
S("button").click(function() 


242 


S("#test").hide(); 


S118 jQuery Mobile ma 


<body> 
<h2>This is a heading</h2> 

<p>This is a paragraph.</p> 

<p id="test">This is another paragraph.</p> 
<button type="button">Click me</button> 
</body> 


</html> 
上 述 代码 演示 了 jQuery 中 hide0 函 数 的 基本 用 法 ， 功 能 是 隐藏 了 当前 的 HTML 元 素 。 执 行 效果 如 


图 14-1 所 示 ， 只 显示 一 个 按钮 。 单 击 该 按钮 后 ， 会 隐藏 所 有 的 HTML 元 素 ， 包 括 该 按钮 ， 此 时 页 面 一 
AxA: 


Click me | 
图 14-1 未 被 隐藏 时 
本 节 将 以 一 个 具体 实例 讲解 jQuery 在 Android 网 页 中 的 简单 应 用 。 


区 实例 14-1: 在 Android 中 使 用 jQuery 设计 网 页 
源码 路 径 : 光盘 :\codes\14\first\ 


本 实例 的 目的 是 给 页 面 添加 一 些 JavaScript 元 素 , 让 页 面 支持 一 些 基 本 的 动态 行为 。 在 具体 实现 时 ， 
基于 前 面 介绍 的 jQuery 框架 。 本 实例 的 目的 是 让 用 户 控制 是 否 显示 页 面 顶 部 的 导航 栏 ， 这 样 用 户 可 以 
只 在 想 看 的 时 候 去 看 。 实 现 流程 如 下 。 

(1) 隐藏 <header> 中 的 局 元素 ， 让 它 在 用 户 第 一 次 加 载 页 面 之 后 不 会 显示 出 来 。 具 体 代 码 如 下 。 

#header u1. hide( 

display: none; 


) 
(2) 定义 显示 和 隐藏 菜单 的 按钮 ， 代 码 如 下 。 
«div class-"leftButton"onclick-"toggleMenu()"» Menu« / div> 


定义 一 个 带 有 lefiButton 类 的 <div> 元 素 ， 将 其 放 在 <header> 里 面 。 下 面 是 该 按钮 的 完整 CSS 样式 
代码 。 
#header div.leftButton { 
position: absolute; 
top: 7px; 
left: 6px; 
height: 30px; 
font-weight: bold; 
text-align: center; 
color: white; 


Nea SD mw se 


text-shadow: rgba (0,0,0,0.6) Opx -1px 1px; 

line-height: 28px; 

border-width: 0 8px 0 8px; 

-webkit-border-image: url(images/button.png) 0 8 0 8; 
) 


上 述 代 码 的 具体 说 明 如 下 。 

回 position:absolute: 从 顶部 开始 ， 设 置 position 为 absolute， 相 当 于 把 这 个 <div> 元 素 从 HTML 
文件 流 中 去 掉 ， 从 而 可 以 设置 自己 的 最 上 面 和 最 左面 的 坐标 。 

回 height3O0px: 设置 高 度 为 30px。 

E] font-weightbold: 定义 文字 格式 为 粗 体 ， 白 色 带 有 一 点 向 下 的 阴影 ， 在 元 素 里 居中 显示 。 

E] text-shadow:rgba: rgb(255,255,255). rgb(10096,10095,10096) FX RIEFFFFFF 格式 是 一 个 原理 ， 
都 是 设置 颜色 值 的 。 在 rgba0 函 数 中 ， 它 的 第 4 个 参数 用 来 定义 alpha 值 〈 透 明度 )， 取 值 范围 
为 0 一 1。 其 中 o 表示 完全 透明 ，1 表示 完全 不 透明 ，0 一 1 之 间 的 小 数 表示 不 同 程度 的 半 透 明 。 

回 line-height: 把 元 素 中 的 文字 向 下 移动 的 距离 ， 使 之 不 会 和 上 边框 齐 平 。 

E] border-width 和 -webkit-border-image: 这 两 个 属性 一 起 决定 把 一 张 图 片 的 一 部 分 放 入 某 一 元 素 
的 边框 中 去 。 如 果 元 素 大 小 由 于 文字 的 增 减 而 改变 ， 图 片 会 自动 拉 伸 适应 这 样 的 变化 。 这 一 
点 非常 实用 ， 意 味 着 只 需要 不 多 的 图 片 、 少 量 的 工作 、 低 带宽 和 更 少 的 加 载 时 间 。 

E] border-width: 让 浏览 器 把 元 素 的 边框 定位 在 距 上 0px、 距 右 8px、 距 下 0px、 距 左 8px 的 地 方 

(4 个 参数 从 上 开始 ， 以 顺 时 针 为 序 )。 不 需要 指定 边框 的 颜色 和 样式 。 边 框 宽度 定义 好 之 后 ， 
就 要 确定 放 进 去 的 图 片 了 。 

E] url(images/button.png) 0808: 5 个 参数 从 左 到 右 分 别 是 图 片 的 URL、 上 边 距 、 右 边 距 、 下 边 距 、 
左边 距 〈 从 上 开始 ， 顺 时 针 为 序 )。URL 可 以 是 绝对 (如 http://example.com/myBorderImage.png ) 
或 者 相对 路 径 , 后 者 是 指 相 对 于 样式 表 所 在 的 位 置 , 而 不 是 引用 样式 表 的 HTML 页 面 的 位 置 。 

(3) 在 HTML 文件 中 插入 引入 JavaScript 的 代码 ， 将 对 aaajs 和 bbb.js 的 引用 写 到 HTML 文件 中 。 


«script type-"text/javascript" src="aaa.js"></script> 
«script type-"text/javascript" src-"bbb.js"» «/script» 


在 文件 bbbjs H, 4*5 —Bt JavaScript 代码 ， 用 于 让 用 户 显示 或 者 隐藏 nav 菜单 。 代 码 如 下 。 


if (window.innerWidth && window.innerWidth <= 480) ( 
S$(document).ready(function()( 
$('#header ul').addClass(hide"); 
S(siheader').append('«div class-"leftButton" onclick-"toggleMenu()"»Menuc/div-"); 
» 
function toggleMenu() ( 
S$(*theader ul').toggleClass(hide"); 
S$(*theader .leftButton").toggleClass('pressed'); 
) 


) 

对 上 述 代 码 的 具体 说 明 如 下 。 

回 第 1 行 : 括号 中 的 代码 ,表示 当 Window XI $11] innerWidth 属性 存在 并 且 小 于 等 于 480px OX 
是 大 部 分 手机 合理 的 最 大 宽度 值 ) 时 才 执 行 到 内 部 。 这 一 行 保 证 只 有 当 用 户 用 Android. 手机 


e. 


回 


回 
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或 者 类 似 大 小 的 设备 访问 这 个 页 面 时 ， 上 述 代码 才 会 执行 。 

第 2 (T: 使 用 了 函数 document ready， 此 函数 是 网 页 加 载 完成 函数 。 这 段 代 码 的 功能 是 设置 当 
网 页 加 载 完 成 之 后 才 运 行 里 面 的 代码 。 

第 3 行 : 使 用 了 典型 的 jQuery 代码 ， 目 的 是 选择 header 中 的 元 素 并 且 往 其 中 添加 hide 类 。 
此 处 使 用 hide 隐藏 了 前 面 CSS 文件 中 的 选择 器 , 这 行 代码 执行 的 效果 是 隐藏 header 的 ul 元素。 
第 4 行 : 此 处 是 给 header 添加 按钮 的 地 方 ， 目 的 是 可 以 显示 和 隐藏 菜单 。 

第 8 行 :函数 toggleMenu0 用 jQuery 的 toggleClass0 函 数 来 添加 或 删除 所 选择 对 象 中 的 某 个 类 。 
这 里 应 用 了 header H ul HHY hide 类 。 

第 9 行 : 在 header 的 leftButton 中 添加 或 删除 pressed 类 ， 类 pressed 的 具体 代码 如 下 。 


#header div.pressed { 


} 


-webkit-border-image: url(images/button_clicked.png) 0 8 0 8; 


通过 上 述 样式 和 JavaScript 行为 设置 以 后 ，Menu 开始 动 起 来 ， 默 认 是 隐藏 了 链接 内 容 ， 单 击 之 后 
才 会 在 下 方 显示 链接 信息 ， 如 图 14-2 所 示 。 


关于 我 们 


博客 
联系 我 们 


Android 之 家 

在 线 客服 

在 线 视频 
Menu 


About 


欢迎 大 家 学 习 Androld , WRL 8 — 7 Wi HR. 
的 职业 ， 我 也 是 这 么 是 认为 的 ， 痪 望 事 实 如 此 -… 


图 14-2 下 方 显示 信息 
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在 第 14 章 中 讲解 了 jQuery Mobile 独一无二 的 一 些 重 要 特征 ， 本 章 讲解 jQuery Mobile 的 基础 语法 
知识 ， 以 便 迅速 上 手 ， 为 读者 学 习 本 书后 面 的 知识 打下 基础 。 


15.1 页 面 模板 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 15 章 \ 页 面 模板 .avi 
THEN Mobile 页 面 模板 的 基本 知识 之 前 ， 先 看 如 下 实例 中 emissi 


实例 文件 template.html 的 具体 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>Page Template</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 页 头 </h1> 
</div> 
«div data-role="content"> 
<p> 你 好 jQuery Mobile!</p> 
</div> 
«div data-role-"footer" data-position="fixed"> 
<h4> 页 尾 </h4> 
</div> 
</div> 
</body> 
</html> 


将 上 述 HTML 文件 在 台式 机 运行 ， 效 果 如 图 15-1 所 示 。 
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Haowe 
15-1 在 台式 机 中 的 执行 效果 
如 果 在 Android 模拟 器 中 运行 上 述 程 序 ， 则 执行 效果 如 图 15-2 所 示 。 


E «| ÉW sos 


KSihttp//feidao.3vfree.us/t.. Fi 


你 好 jQuery Mobile! 
页 尾 


图 15-2 在 Android 模拟 器 中 的 执行 效果 
对 于 上 述 代码 来 说 ， 无 论 使 用 什么 浏览 器 ， 运 行 效果 都 相似 。 这 是 因为 上 述 模板 符合 HTML 5 i 
法 标准 ， 并 且 包含 了 jQuery Mobile 的 特定 属性 和 asset 文件 CCSS, JS) 。 下 面 开始 对 上 述 代 码 进行 详 
细 讲 解 。 
COD 典型 的 视图 配置 。 
对 jQuery Mobile 来 说 ， 实 例 15-1 的 做 法 是 一 个 推荐 的 视图 (viewport) 配置 ， 各 个 值 的 具体 说 明 


如 下 。 

E] device-width: 表示 希望 让 内 容 扩展 到 设备 屏幕 的 整个 宽度 。 

E] initial-scale: 设置 了 用 来 查看 Web 页 面 的 初始 缩放 百分比 或 缩放 因数 。 如 果 值 为 1， 则 显示 一 

个 未 缩放 的 文档 。 

作为 一 名 jQuery Mobile 开发 人 员 ， 可 以 根据 应 用 程序 的 需要 自 定 义 视图 的 设置 。 例 如 希望 禁用 缩 
放 ， 则 可 以 添加 如 下 所 示 的 代码 。 

user-scalable- no 

但 是 ， 如 果 禁 用 了 缩放 ， 则 会 破坏 应 用 程序 的 可 访问 性 ， 因 此 建议 读者 要 谨慎 使 用 。 

(2) fil CSS. 

f£ jQuery Mobile 应 用 中 ， 通 过 使 用 CSS 可 以 为 所 有 的 A 级 和 B 级 浏览 器 应 用 风格 (stylistic〉 进 
行 优化 ， 设 计 人 员 可 以 根据 需要 自 定义 或 添加 自己 的 CSS。 

© 
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(3) jQuery 库 。 
库 是 jQuery Mobile 的 核心 依赖 ， 如 果 想 自己 的 程序 具有 更 多 的 动态 行为 ， 则 建议 读者 在 移动 页 面 
中 使 用 jQuery 的 核心 API。jQuery Mobile JavaScript 库 必 须 在 jQuery 和 任何 可 能 存在 的 自 定 义 脚 本 之 
后 声明 。jQuery Mobile 库 是 增强 整个 移动 体验 的 核心 。 
(4) data-role="page" 的 功能 是 为 一 个 jQuery Mobile 页 面 定 义 页 面容 器 。 只 有 在 构建 多 页 面 设计 时 ， 
才 会 用 到 这 个 元 素 。 
C5) data-role= "header" 的 功能 是 设置 页 眉 (header) 或 标题 栏 ， 该 属性 是 可 选 的 。 
(6) data-role="content" 的 功能 是 设置 内 容 主体 的 包装 容器 Cwrapping container) ， 该 属性 是 可 选 的 。 
(7) data-role="footer" 包 含 页 脚 栏 ， 该 属性 是 可 选 的 。 
究竟 jQuery Mobile 是 如 何 为 优化 的 移动 体验 增强 标记 的 呢 ? 一 般 来 说 ， 有 具体 流程 如 下 。 
(1) jQuery Mobile 先 载 入 语义 HTML 标记 。 
(2) jQuery Mobile 迭代 由 它们 的 data-role 属性 定义 的 每 一 个 页 面 组 件 。 因 为 jQuery Mobile 2:35 
代 每 一 个 页 面 组 件 ， 所 以 会 为 每 一 个 应 用 优化 过 的 移动 CSS 3 组 件 添加 标记 。 
(3) jQuery Mobile 最 终 会 将 标记 添加 到 页 面 中 ， 从 而 让 页 面 能 够 在 所 有 平台 上 普遍 呈现 。 
(4) 在 完成 页 面 的 标记 添加 之 后 ，jQuery Mobile 会 显示 优化 过 的 页 面 。 要 查看 由 移动 浏览 器 呈现 
的 添加 源 文件 ， 例 如 如 下 所 示 的 实现 代码 。 


«IDOCTYPE html» 
<html class-"ui-mobile» 
<head> 
<base href="http://www.server.com/app-name/path/"> 
<meta charset="utf-8"> 
<title>Page Header</title> 
«reta content="width=device-width, initial-scale=i" name="viewport"> 
<link rel="stylesheet" type="text/css" href="jquery.mobile-min.css" /> 
«script type="text/javascript" src="jquery-min.js"></script> 
«script type="text/javascript" src="jquery.mobile-min.js"></script> 
</head> 
<body class="ui-mobile-viewport"> 
<div class="ui-page ui-body-c ui-page-active" data-role="page" 
style="min-height: 320px;"> 
<div class="ui-bar-a ui-header" data-role="header" role="banner"> 
<hl class-"ui-title" tabindex-"o" role="heading" aria-level="l"> 
页 头 </hl></div> 
<div class-"ui-content" data-role-"content" role="main"> 
<p> 你 好 jOuery Mobile!«/p» 
</div> 
«div class-"ui bar-a ui-footer ui-footer-fixed fade ui-fixed-inline" 
data-position-"fixed"data-role-"footer"role-"contentinfo" 
style="top: 508px; "> 
<h4 class="ui-title"tabindex="0"role="heading"aria-level="1"> 
页 尾 </h4> 
</div> 
</div> 
«div class-"ui-loader ui-body-a ui-corner-all"style="top: 334.5px; "> 
«span class-"ui-icon ui-icon-loading spin" «/span» 
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<hi> 载 入 </hi></div> 

</body> 

</html> 

对 上 述 代 码 的 具体 说 明 如 下 。 

(1) 在 <base> 标 签 中 ，href 为 一 个 页 面 中 的 所 有 链接 指定 了 一 个 默认 的 地 址 或 者 目标 。 在 jQuery 
Mobile 应 用 中 ， 当 载 入 特定 页 面 的 资源 (assets) 时 (如 图 片 、CSS、JS 等 ) 会 用 到 href. 

(2) 在 <body> 标 签 中 ， 包 含 了 header、content 和 footer 组 件 的 增强 样式 。 在 默认 情况 下 ， 所 有 的 
组 件 都 是 使 用 默认 的 主题 和 特定 的 移动 CSS 增强 来 设计 (styled) 的 。 

(GO 所 有 的 组 件 现在 都 证 明了 可 访问 性 ， 这 些 都 是 由 WAIARIA 设置 的 ， 开 发 人 员 可 以 免费 获 
得 这 些 增强 。 
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F 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 15 章 \ 多 页 面 模板 .avi 
在 jQuery Mobile 应 用 程序 中 , 可 以 在 一 个 HTML 文档 中 嵌入 多 个 页 面 。 当 载 入 子 页 面 时 ， 其 响应 
时 间 会 缩短 。 本 节 将 详细 讲解 jQuery Mobile 中 多 页 面 模板 的 基本 知识 。 


15.2.1 一 个 多 页 面 模板 实例 


在 下 面 的 实例 中 可 以 看 到 ， 多 页 面 文 档 与 前 面 看 到 的 单 页 面 文档 相同 第 二 个 页 面 附 加 在 第 一 个 
页 面 后 面 的 情况 除外 ) 。 


实例 15-2: 在 Android 中 使 用 多 页 面 模板 
源码 路 径 : 光盘 :\codes\15\duo.html 


实例 文件 duo.html 的 具体 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>Multi Page Example</title> 
«meta name-'"viewport" content-"width-device-width, initial-scale=1"> 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«script src-"http://code.jquery.com/jquery-1.6.4.min.js"» «/script 
«script type-"text/javascript"»/* Shared scripts for all internal and ajax-loaded pages */</script> 
«script src-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"» «/script" 
</head> 
<body> 
<l-- First Page --> 
«div data-role="page" id="home" data-title="Welcome"> 
<div data-role="header"> 
<h1>Multi-Page</h1> 
</div> 
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<div data-role="content"> 
«a href="#contact-info" data-role="button"> 联 系 我 们 </a> 
</div> 
<script type="text/javascript"> 
/* Page specific scripts here. */ 
</script> 
</div> 
«I-—- Second Page —> 
«div data-role-"page" id-"contact-info" data-title-"Contacts"» 
«div data-role-"header"» 
<h1> 联 系 我 们 </h1> 
</div> 
<div data-role="content"> 
联系 信息 详情 … 
</div> 
</div> 
</body> 
</html> 


上 述 代码 在 Android 中 的 初始 执行 效果 如 图 15-3 所 示 。 
单 击 “ 联 系 我 们 ”按钮 后 会 显示 一 个 新 界面 ， 如 图 15-4 所 示 。 此 新 界面 效果 也 是 由 上 述 代 码 实现 的 。 


Multi-Page 


联系 我 们 联系 信息 详情 … 


图 15-3 初始 执行 效果 图 15-4 显示 一 个 新 界面 

下 面 对 上 述 实 例 代 码 进 行 详细 讲解 。 

CD 在 多 页 面 文档 中 , 每 一 个 页 面 必须 包含 一 个 唯一 的 id, 并且 每 个 页 面 可 以 有 一 个 page 或 dialog 
的 data-role。 最 初 显示 多 页 面 时 , 只 有 第 一 个 页 面 得 到 了 增强 并 显示 出 来 。 例如 , 当 请 求 multi-page.html 
的 文档 时 ， 其 id 为 home 的 页 面 将 会 显示 出 来 ， 原 因 是 它 是 多 页 面 文档 中 的 第 一 个 页 面 。 如 果 想 要 请 
求 id 为 contact 的 页 面 ， 则 可 以 通过 在 多 页 面 文档 名 的 后 面 添加 “#”， 以 内 部 页 面 的 id 名 方式 来 显示 ， 
此 时 就 是 multi-page.html#contact。 当 载 入 一 个 多 页 面 文档 时 ， 只 有 初始 页 面 会 被 增强 并 显示 ， 后 续 页 面 
只 有 当 被 请 求 并 被 缓存 到 DOM. 内 时 才 会 被 增强 。 对 于 要 求 有 快速 响应 时 间 的 页 面 来 说 ， 该 行为 是 很 
理想 的 。 为 了 设置 每 一 个 内 部 页 面 的 标题 ， 可 以 添加 data-title 属性 。 

(2) 当 链 接 到 一 个 内 部 页 面 时 ， 必 须 通 过 页 面 的 id 来 引用 。 

G) 如 果 想 查看 特定 页 面 中 的 脚本 , 则 必须 将 它们 放置 在 页 面容 器 内 。 例 如 , 在 multi-page.html#contact 
的 内 部 声明 的 任何 JavaScript 无 法 通过 multi-page.html#home 来 访问 ,只 有 活跃 页 面 的 脚本 可 以 被 访问 。 
但 是 ， 在 父 文档 的 <head> 标 签 内 声明 的 所 有 脚本 ， 包 括 jQuery. jQuery Mobile 和 自 定义 脚本 ， 都 可 以 
被 内 部 页 面 和 通过 Ajax 载 入 的 页 面 来 访问 。 


15.2.2 ”设置 内 部 页 面 的 页 面 标题 


需要 重点 注意 的 是 ， 内 部 页 面 的 标题 Cte) 可 以 按照 如 下 优先 顺序 进行 设置 。 
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(1) 如 果 data-title 值 存 在 ， 则 它 会 用 作 有 内 部 页 面 的 标题 。 例 如 ，multi-page.html#home 页 面 的 
标题 将 被 设置 为 Home。 
(2) 如 果 不 存 在 data-title 值 ， 则 页 眉 (header) 将 会 用 作 内 部 页 面 的 标题 。 例如， 如 果 multi-page. 
html£home 页 面 的 data-title 属性 不 存在 ， 则 标题 将 被 设置 为 页 面 <header> 标 记 的 值 Welcome Home. 
(3) 如 果 内 部 页 面 既 不 存在 data-title， 也 不 存在 页 眉 ， 则 <head> 标 记 中 的 title 元 素 将 会 用 作 内 部 
页 面 的 标题 。 例 如 ， 如 果 multi-page.html#page 页 面 不 存在 data-title 属性 ， 也 不 存在 页 眉 ， 则 该 页 面 的 
标题 将 被 设置 为 其 父 文档 的 title 标记 的 值 Multi Page Example。 
注意 : 比较 单 页 面 文档 和 多 页 面 文档 。 
多 页 面 文档 在 最 初 载 入 时 ， 会 占用 较 多 的 带宽 ， 但 是 只 需要 向 服务 器 发 送 一 个 请 求 即 可 ， 因 此 它们 
的 子 页 面 会 以 相当 短 的 响应 时 间 载 入 。 而 单 页 面 文档 尽管 占用 的 带宽 较 少 ， 但 是 每 访问 一 个 页 面 时 
需要 向 服务 器 发 送 一 个 请 求 ， 所 以 响应 时 间 会 比较 长 。 如 果 通常 按 顺序 访问 多 个 页 面 ， 则 最 为 理想 
的 方式 是 将 它们 放置 在 同一 个 文档 内 的 最 前 面 ， 这 样 做 的 好 处 是 方便 载 入 。 虽 然 这 样 最 初 会 占用 略 
高 的 带宽 ， 但 是 在 访问 下 一 个 页 面 时 可 以 实现 即时 响应 。 如 果 用 户 同时 访问 两 个 页 面 ， 则 可 以 将 文 
件 单独 存放 ， 从 而 在 初次 载 入 时 能 够 消耗 较 少 的 带宽 。 


15.3 使 用 Ajax 修饰 导航 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 15 章 \ 使 用 Ajax 修饰 导航 .avi 
通过 本 章 前 面 内 容 的 学 习 ， 已 经 了 解 到 jQuery Mobile 如 何 从 一 个 内 部 页 面 导 航 到 另外 一 个 内 部 页 


面 。 当 多 页 面 文档 在 初始 化 时 ， 内 部 页 面 已 经 添加 到 DOM 中 ， 这 样 从 一 个 内 部 页 面 转换 到 另外 一 个 
页 面 时 ， 速 度 才 会 相当 快 。 在 从 一 个 页 面 导航 到 另外 一 个 页 面 时 ， 可 以 配置 要 应 用 的 页 面 转 换 类 型 。 


默认 情况 下 ， 框 架 会 为 所 有 的 转换 应 用 一 个 “滑动 Clide) ”效果 。 


<!-- 导 航 到 内 页 一 > 
<div data-role="content"> 
<a href="#contact" data-role="button">Contact Us</a> 
</div> 


15.3.1 使 用 Ajax 


Ajax 是 指 异步 JavaScript 及 XML, 是 Asynchronous JavaScript And XML 的 缩写 。Ajax 不 是 一 种 新 
的 编程 语言 ， 而 是 一 种 用 于 创建 更 好 、 更 快 以 及 交互 性 更 强 的 Web 应 用 程序 的 技术 。 通 过 使 用 Ajax. 
JavaScript 可 使 用 XMLHttpRequest 对 象 来 直接 与 服务 器 进行 通信 。 通 过 该 对 象 ，JavaScript 可 在 不 重 载 
页 面 的 情况 下 与 Web 服务 器 交换 数据 。Ajax 在 浏览 器 与 Web 服务 器 之 间 使 用 异步 数据 传输 (HTTP 
请 求 ) ， 这 样 即 可 使 网 页 从 服务 器 请 求 少量 的 信息 ， 而 不 是 整个 页 面 。 
当 一 个 单 页 面 转换 到 另外 一 个 单 页 面 时 ， 导 航模 型 是 不 同 的 。 例 如 可 以 从 多 页 面 中 提取 出 contact 
页 面 , 然后 命名 为 contacthtml 文件 .下 面 的 实例 演示 了 home 页 面 (如 ajax.html) 通 过 一 个 普通 的 HITP 
链接 引用 来 返回 contact 页 面 。 
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实例 15-3: 在 Android 中 使 用 Ajax 驱动 导航 
区 源码 路 径 : 光盘 :\codes\15\ajax html 
光盘 :codes\l5Contacthtm —————00000000000000 00 


实例 文件 ajax-html 的 具体 代码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 
«meta charset="utf-8"> 
«title» Hijax Example</title> 
«meta namez"viewport" content-"width-device-width, initial-scale-1"» 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«script src-"http;//code.jquery.com/jquery-1.6.4.min.js"» «/script" 
«script src-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"»«/script" 
</head> 
<body> 
<l-- First Page --> 
<div data-role="page"> 
<div data-role="header"> 
<h1>Ajax 页 面 </h1> 
</div> 
<div data-role="content"> 
«a href="contact.html" data-role="button"> 联 系 我 们 </a> 
</div> 
</div> 
</body> 
</html> 


上 述 代码 在 Android 中 的 初始 执行 效果 如 图 15-5 所 示 。 


Ajax 页 面 


联系 我 们 


图 15-5 初始 执行 效果 
当 单 击 “ 联 系 我 们 ”按钮 后 会 来 到 新 页 面 contact.html， 此 文件 的 实现 代码 如 下 。 


«div data-role="page"> 
<div data-role="header"> 
<h1> 联 系 我 们 </h1> 
</div> 


<div data-role="content"> 


电话 : 010-111111111</div> 
<div data-role="content"> 
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邮箱 : 7291017304@qq.com</div> 
«div data-role="content"> 地 址 : 中 国 山东 </div> 
</div> 
单 击 “ 联 系 我 们 ”按钮 后 会 显示 一 个 Ajax 特效 ， 如 图 15-6 所 示 ， 然 后 显示 一 个 如 图 15-7 所 示 的 
新 页 面 。 


电话 :010-111111111 


邮箱 : 7291017304@qq.com 
联系 我 们 
15-6 Ajax 特效 导航 图 15-7 新 界面 效果 


当 单 击 “ 联 系 我 们 ”按钮 时 ，jQuery Mobile 将 会 按照 如 下 所 示 的 步骤 处 理 该 请 求 。 
(1) 首先 jQuery Mobile 解析 href， 然 后 通过 一 个 Ajax 请 求 载 入 页 面 。 如 果 成 功 载 入 页 面 ， 则 将 
该 页 面 添 加 到 当前 页 面 的 DOM 中 。 执 行 过 程 如 图 15-8 所 示 。 


jQuery Mobile 
Hijax 请 求 
页 面 请 求 | 一 一 十 一 一 一 一 一 一 一 一 一 一 一 »| 
| Hijax 响 应 UEN Eiri 
增强 页 面 
转换 
图 15-8 ”处 理 过 程 


当 页 面 成 功 添加 到 DOM 中 后 ，jQuery Mobile 可 以 根据 需要 来 增强 该 页 面 ， 更 新 基础 (base) 元 素 
的 @href， 如 果 没 有 被 显 式 设 置 ， 则 会 设置 data-url 属性 。 

(2) 框架 使 用 应 用 的 默认 “滑动 ”转换 模式 转换 到 一 个 新 的 页 面 。 当 然 ， 框 架 也 可 以 实现 无 颖 的 
CSS 转换 ， 因 为 from 页 面 和 to 页 面 都 存在 于 DOM 中 。 在 转换 完成 之 后 ， 当 前 可 见 的 页 面 或 活动 页 面 
将 会 被 指定 为 ui-page-active CSS 类 。 

(3) 将 产生 的 URL 作为 书签 。 例 如 ， 如 果 想 深 链接 (deep link〉 到 contact 页 面 ， 则 可 以 通过 
http://<host:port>/2/contact.html 路 径 来 访问 。 

è 
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(4) 如 果 载 入 页 面 失败 ， 则 会 显示 和 淡出 一 条 短 的 错误 消息 ， 该 消息 是 对 Error Loading Page (页 
面 载 入 错误 ) 消息 的 覆 写 Coverlay) 。 


15.3.2 ”使 用 changePage() 函 数 


函数 changePageO 处 理 从 一 个 页 面 转换 到 另 一 个 页 面 时 涉及 的 所 有 细节 。 可 以 转换 到 除 当前 页 面 之 
外 的 任何 页 面 。 可 用 的 转换 类 型 的 具体 说 明 如 下 。 


[ra] 


回 


回 
回 


回 
回 


回 


滑动 (slide): 在 页 面 之 间 移 动 的 最 常见 的 转换 。 在 一 个 页 面 流 中 ， 该 转换 给 出 了 向 前 移动 或 
向 后 移动 的 外 观 。 这 是 所 有 链接 之 间 的 默认 转换 。 

卷 起 〈slideup): 用 于 打开 对 话 框 或 显示 额外 信息 的 一 种 常见 的 转换 。 该 转换 给 出 的 外 观 可 以 
来 为 当前 活动 的 页 面 收集 额外 的 输入 信息 。 

向 下 滑动 (slidedown): 该 转换 与 卷 起 相对 ， 但 是 可 用 于 实现 类 似 的 效果 。 

弹出 (pop: 用 于 打开 对 话 框 或 显示 额外 信息 的 另 一 种 转换 。 该 转换 给 出 的 外 观 可 以 用 来 为 
当前 活动 的 页 面 收集 额外 的 输入 信息 。 

淡 入 /淡出 (fade):; 用 于 入 口 页 面 或 出 口 页 面 的 一 种 常见 的 转换 效果 。 

翻转 Cip): 用 于 显示 额外 信息 的 一 种 常用 转换 。 通 常情 况 下 ， 屏 幕 的 背景 会 显示 没有 必要 
存在 于 主 UI 上 的 配置 选项 〈 信 息 图 标 )。 

无 Gone): 不 应 用 任何 转换 。 


x 


使 用 函数 changePage0 的 语法 格式 如 下 。 
$.mobile.changePage(toPage, [options]) 


各 个 参数 的 具体 说 明 如 下 。 
(1) toPage(string 或 jQuery 集合 ): 将 要 转向 的 页 面 。 


回 
回 


toPage(string): 一 个 文件 URL (contact.html) 或 内 部 元 素 的 ID contact). 
toPage(jQuery 集合 ): 包含 一 个 页 面 元 素 的 jQuery 集合 ， 而 且 该 页 面 元 素 是 该 集合 的 第 一 个 参数 。 


(2) options(object): 配置 changePage 请 求 的 一 组 键 / 值 对 。 所 有 的 设置 都 是 可 选 的 ， 可 设置 的 值 


E 
二 | 
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transition(string,default: $.mobile.defaultTransition): 为 changePage 应 用 的 转换 。 默 认 的 转换 是 
滑动 。 

reverse(boolean,default:false): 指示 该 转换 是 向 前 转换 还 是 向 后 转换 。 默 认 的 转换 是 向 前 。 
changeHash(boolean,default:true): 当 页 面 转换 完成 之 后 ， 更 新 页 面 URL 的 #。 

role(string, default:"page"): 在 显示 页 面 时 使 用 的 data-role 值 . 如 果 页 面 是 对 话 框 , 则 使 用 dialog。 
pageContainer: 是 一 个 jQuery 集合 ， 默 认 格 式 是 default$.mobile .pageContainer， 用 于 指定 应 
该 包含 载 入 页 面 的 元 素 。 

type (string, default"get"): 在 生成 页 面 请 求 时 ， 指 定 所 使 用 的 方法 (get 或 post)。 

data (string 或 object, default:undefined): 发 送 一 个 Ajax 页 面 请 求 的 数据 。 

reloadPage (boolean, default: false): 强制 页 面 重新 载 入 ， 即 使 它 已 经 位 于 页 面容 器 的 DOM 中 。 
showLoadMsg (boolean, default: true): 在 请 求 页 面 时 显示 载 入 信息 。 

fromHashChange(boolean, default: false): 指示 changePage 是 否 来 自 于 一 个 hashchange 事件 。 
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15.3.8 配置 Ajax 导航 


在 jQuery Mobile 应 用 中 ，Ajax 导航 是 全 局 启用 的 。 在 默认 情况 下 ，jQuery Mobile 可 以 管理 DOM 
的 大 小 或 缓存 ， 它 只 将 活动 页 面 转换 所 涉及 的 from 和 to 页 面 合并 到 DOM 中 。 要 想 禁 用 Ajax 导航 ， 
需要 在 绑 定 移动 初始 事件 时 设置 如 下 所 示 的 值 。 


$.moible.ajaxEnabled=false 


K 


(1) 编写 一 个 简单 的 HTML 文件 ， 命 名 为 android.html， 有 具体 代码 如 下 。 


<html> 
<head> 
<title>Jonathan Stark</title> 
«meta name="viewport" content="user-scalable=no, width=device-width" /> 
«link rel="stylesheet" href="android.css" type="text/css" media="screen" /> 
«script type-"text/javascript" src="jquery.js"></script> 
«script type-"text/javascript" src-"android.js"»«/script» 
</head> 
<body> 
<div id="header"><h1>AAA</h1></div> 
<div id="container"></div> 
</body> 
</html> 


(20 编写 样式 文件 android.css， 主 要 代码 如 下 。 


body ( 
background-color: #ddd; 
color: #222; 
font-family: Helvetica; 
font-size: 14px; 
margin: 0; 
padding: 0; 


— 实例 15-4: 在 Android 系统 中 开发 一 个 Ajax 网 页 0 
.源码 路 径 : 光盘 :codes\l5\gaoi — — — —— 


i 

#header { 
background-color: £ccc; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); 
border-color: #666; 
border-style: solid; 
border-width: 0 0 1px 0; 

} 

#header h1 { 
color: #222; 
font-size: 20px; 
font-weight: bold; 
margin: 0 auto; 


255 


Android 移动 网 站 开发 详解 


padding: 10px 0; 
text-align: center; 
text-shadow: Opx 1px 1px #fff, 
max-width: 160px; 
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 
) 
ul { 
list-style: none; 
margin: 10px; 
padding: 0; 
) 
ullia( 
background-color: #FFF; 
border: 1px solid #999; 
color: #222; 
display: block; 
font-size: 17px; 
font-weight: bold; 
margin-bottom: -1px; 
padding: 12px 10px; 
text-decoration: none; 
) 
ul li:first-child a ( 
-webkit-border-top-left-radius: 8px; 
-webkit-border-top-right-radius: 8px; 
) 
ul li:last-child a ( 
-webkit-border-bottom-left-radius: 8px; 
-webkit-border-bottom-right-radius: 8px; 
} 
ul li a:active, ul li a:hover { 
background-color: blue; 


color: white; 
} 
#content { 
padding: 10px; 
text-shadow: Opx 1px 1px fff; 
) 
#content a ( 
color: blue; 
) 


上 述 样式 文件 在 本 章 的 前 面 内 容 中 已 进行 了 详细 讲解 ， 这 里 不 再 更 述 。 
G) 继续 编写 如 下 HTML 文件 。 

回 abouthtml。 

回 blog.html. 

回 contact.html. 
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加 consulting-clinic.html. 
M index.html. 
它们 的 代码 相同 ， 具 体 代码 如 下 。 


<html> 
<head> 
<title>AAA</title> 
«meta name="viewport" content-"user-scalable-no, width=device-width" /> 
«link rel-"stylesheet" type-"text/css" href-"android.css" media-"only screen and (max-width: 480px)" /> 
«link rel="stylesheet" type="text/css" href-"desktop.css" media="screen and (min-width: 481px)" /> 
<I-IfIE]> 
«link rel="stylesheet" type="text/css" href-"explorer.css" media="all" /> 
<lI[endif]--> 
«script type-"text/javascript" src="jquery.js"></script> 
«script type-"text/javascript" src-"android.js"» «/script» 
«meta http-equiv-"Content-Type" content-"text/html; charset-gb2312"» 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
<h1><a href="./">AAAA</a></h1> 
<div id="utility"> 
<ul> 
<li><a href="about.html">AAA</a></li> 
<li><a href="blog.html">BBB</a></li> 
<li><a href="contact.html">CCC</a></li> 
«Iul» 
</div> 
«div id="nav"> 
«ul» 
<li><a href-"bbb.html"» DDD«/a» «/li» 
<li><a href-"ccc.html"»EEE«/a» «/li» 
<li><a href-"ddd.html"*FFF «/a»«/li» 
<li><a href-"http://www.aaa.com"» GGG«/a» «/li» 
«Iul» 
</div> 
</div> 
«div id="content"> 
<h2>About</h2> 
<p> 欢 迎 大 家 学 习 Android， 都 说 这 是 一 个 前 途 辉煌 的 职业 ， 我 也 是 这 么 认为 的 ， 希 望 事实 如 
此 ...</p> 
</div> 
«div id="sidebar"> 
«img alt=" 好 图 片 " src="aaa.png"> 
<p> 欢 迎 大 家 学 习 Android， 都 说 这 是 一 个 前 途 辉煌 的 职业 ， 我 也 是 这 么 认为 的 ， 希 望 事实 如 
此 .…</p> 
</div> 
«div id="footer"> 
«ul» 
<li><a href-"bbb.html"»Services«/a» «/li» 
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<li><a href-"ccc.html"» About«/a» «/li» 
<li><a href="ddd.html">Blog</a></li> 

«Jul» 

«p class-"subtle" iiis S 48</p> 

</div> 
</div> 
</body> 
</html> 


(4) 编写 JavaScript 文件 android.js， 在 此 文件 中 使 用 了 Ajax 技术 。 具 体 代 码 如 下 。 


var hist = []; 
var startUrl = 'index.html'; 
S$(document).ready(function()( 
loadPage(startUrl); 
» 
function loadPage(url) ( 
S$('body').append('«div id-"progress"»wait for a moment...«/div»"); 
scrollTo(0,0); 
if (url == startUrl) ( 
var element - ' stheader ul'; 
}else { 
var element = ' #content'; 
} 
$('#container').load(url + element, function() 
var title  $(h2^).html() || Vj; 
$('h1').htmi(title); 
$('h2').remove(); 
$('.leftButton').remove(); 
hist.unshift({'url":url, 'title':title}); 
if (hist.length > 1) ( 
$(#header).append('<div class="leftButton">'+hist[1].title+'</div>'); 
$(#header .leftButton").click(function(e)( 
$(e.target).addClass('clicked'); 
var thisPage = hist.shift(); 
var previousPage = hist.shift(); 
loadPage(previousPage.url); 
» 
} 
$('#container a').click(function(eX{ 
var url = e.target.href; 
if (url.match(/aaa.com/)) { 
e.preventDefault(); 
loadPage(url); 
} 
» 
S(stprogress').remove(); 


258 


第 15 章 jQuery Mobile 语法 基础 


对 于 上 述 代码 的 具体 说 明 如 下 。 
回 第 1 一 5 行 : 使 用 了 jQuery 的 document ready 函数 ， 目 的 是 使 浏览 器 在 加 载 页 面 完成 后 运行 
loadPageQ ER Zi . 


回 ”剩余 代码 是 loadPage(ur]) 函 数 部 分 ， 此 函数 的 功能 是 载 入 地 址 为 URL. 的 网 页 ， 但 是 在 载 入 时 
使 用 了 Ajax 技术 特效 。 具 体 说 明 如 下 。 
> 第 7 行 : 为 了 使 Ajax 效果 能 够 显示 出 来 ， 在 loadPage0 函 数 启动 时 ， 在 body 中 增加 一 个 
正在 加 载 的 div。 
> 第 9 一 13 行 : 如 果 没 有 在 调用 函数 时 指定 URL( 如 第 一 次 在 document ready 函数 中 调用 )， 
URL 将 会 是 undefined， 第 10 行 会 被 执行 。 第 10 行 和 第 11 行 是 jQuery 的 load0 函 数 样 
例 。load0O 函 数 在 给 页 面 增加 简单 快速 的 Ajax 实用 性 上 非常 出 色 。 如 果 把 这 一 行 翻译 出 
来 ， 它 的 意思 是 “从 index.html 中 找 出 所 有 #header 中 的 ul 元 素 ， 并 把 它们 插入 当前 页 面 
的 #container 元 素 中 ， 完 成 之 后 再 调用 hij ackLinksQER IC" > 74 url 参数 有 值 时 ， 执 行 第 
12 行 。 从 效果 上 看 ， 从 传 给 loadPageO FR E] url 中 得 到 #content 元 素 ， 并 把 它们 插入 当 
前 页 面 的 #container 元 素 ， 完 成 之 后 调用 hij ackLinksO 函 数 。 
(5) 最 后 的 修饰 。 
为 了 能 使 设计 的 页 面体 现 出 Ajax 效果 ， 还 需 继 续 设 置 样式 文件 android.css。 
加 ”为 了 能 够 显示 出 “加 载 中 …” 的 样式 ， 需 要 在 android.css 中 添加 如 下 对 应 的 修饰 代码 。 
#progress { 
-webkit-border-radius: 10px; 
background-color: rgba(0,0,0,.7); 
color: white; 
font-size: 18px; 
font-weight: bold; 
height: 80px; 
left: 60px; 
line-height: 80px; 
margin: 0 auto; 
position: absolute; 
text-align: center; 
top: 120px; 
width: 200px; 


) 


回 ”用 边框 图 片 修饰 返回 按钮 ， 并 清除 默认 的 单 击 后 高 亮 显示 的 效果 。 在 android.css 中 添加 如 下 
修饰 代码 。 


#header div.leftButton ( 
font-weight: bold; 
text-align: center; 
line-height: 28px; 
color: white; 
text-shadow: Opx -1px 1px rgba(0,0,0,0.6); 
position: absolute; 
top: 7px 
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left: 6px; 

max-width: 50px; 

white-space: nowrap; 

overflow: hidden; 

text-overflow: ellipsis; 

border-width: 0 8px 0 14px; 

-webkit-border-image: url(images/back button.png) 0 8 0 14; 
-webkit-tap-highlight-color: rgba(0,0,0,0); 


) 


此 时 在 Android 中 执行 上 述 文件 ， 执 行 后 先 加 载 页 面 ， 在 加 载 时 会 显示 “wait for a moment..." f] 
提示 ， 如 图 15-9 所 示 。 在 滑动 选择 某 个 链接 时 ， 被 选中 的 会 以 不 同 的 颜色 显示 ， 如 图 15-10 所 示 。 

而 文件 android.html 的 执行 效果 和 其 他 文件 相 比 稍 有 不 同 ， 如 图 15-11 所 示 。 这 是 因为 在 编码 时 有 
意 而 为 之 。 


RSS A KSihttp//guanxijing.35free... FA KSihttp//guanxijing.35free... Fl 
m —— 
BBB M^ 
BBB 
ccc 
| ccc wait tor a moment... ccc 
r DDD 
DDOD 
EEE pe 
FFF FFF 
GGG GGG 
图 15-9 ”提示 特效 图 15-10 被 选中 的 颜色 不 同 图 15-11 文件 android.html 


15.4 对 话 框 


Gu 知识 点 讲解 : 光盘 \ 视 频 讲解 第 15 章 \ 对 话 框 .avi 

在 jQuery Mobile 应 用 中 ,对 话 框 的 边界 是 有 间距 (inset) 的 ， 从 而 产生 模 态 对 话 框 (modal dialog) 
的 外 观 。 通 过 使 用 jQuery Mobile， 可 以 创建 确认 对 话 框 、 警 告 对 话 框 和 动作 表单 样式 的 对 话 框 。 在 具 
体 设计 过 程 中 ， 可 以 将 一 个 页 面 转 换 为 链接 或 页 面 组 件 上 的 一 个 对 话 框 。 

在 一 个 页 面 链接 中 ， 可 以 添加 data-rel="dialog" 属 性 创建 一 个 对 话 框 。 在 添加 该 属性 之 后 ， 将 会 自 
动 载 入 目标 页 面 ， 并 将 其 增强 为 一 个 模 态 对 话 框 。 另 外 ， 也 可 以 在 页 面容 器 上 配置 对 话 框 ， 将 
data.role="dialog" 属 性 添加 到 页 面容 器 中 , 当 该 页 面容 器 组 件 载 入 页 面 时 , 会 被 设置 为 一 个 模 态 对 话 框 。 

在 实际 开发 应 用 中 ， 有 如 下 两 个 选项 可 以 打开 对 话 框 。 

回 data-role-"dialog". 

M data-rel-"dialog". 

在 此 建议 读者 选择 页 面 配置 Cdata-role-"dialog") ， 因 为 只 需要 在 页 面容 器 中 配置 一 次 对 话 框 ， 而 
且 导 航 到 该 对 话 框 的 按钮 也 无 须 任何 修改 。 例 如 ， 如 果 有 3 个 按钮 链接 到 对 话 框 ， 基 于 页 面 的 配置 则 
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只 需要 修改 一 次 。 而 基于 链接 的 配置 则 需要 修改 3 次 ， 每 次 对 应 一 个 按钮 。 

在 jQuery Mobile 对 话 框 API 中 ， 公 开 了 一 个 重要 的 方法 : close。 当 需要 以 程序 方式 来 处 理 对 话 框 
时 ， 可 以 使 用 该 方法 。 例 如 想 使 用 程序 来 处 理应 用 中 “同意 ”按钮 的 进程 ， 可 以 处 理 单 击 事件 ， 然 后 
处 理 任何 需要 的 业务 逻辑 ， 并 在 完成 之 后 关闭 对 话 框 。 


15.4.1 实现 基本 对 话 框 效 果 


下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 系统 中 实现 对 话 框 效 果 的 基本 方法 。 


实例 文件 duihuakuang.html 的 具体 实现 流程 如 下 。 
OD 实现 链接 级 别 的 转换 ， 具 体 代 码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
«title» Multi Page Example</title> 
«meta name-"viewport" content-"width-device-width, initial-scale-1"» 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
.ui-header .ui-title, .ui-footer .ui-title { margin-right: 0 !important; margin-left: 0 !important; } 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


<|-- 第 一 页 -> 
«div data-role-"page" id="home"> 
<div data-role-"header"» 
<h1> 对 话 框 实例 </h1> 
</div> 


«div data-role="content"> 
<a href="#terms" data-transition="slidedown"> 会 员 注册 条 款 </a> 

</div> 

</div> 

(2) 实现 页 面 级 别 的 转换 ， 具 体 代码 如 下 。 

<!-- 第 二 页 一 对 话 框 一 > 

«div data-role-"dialog" id= "terms"> 
<div data-role="header"> 


<h1> 注 册 条 款 </h1> 
</div> 
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<div data-role-"content" data-theme="c"> 
你 同意 上 述 条 款 吗 ? 
<br><br> 


«a href="#home" data-role-"button" data-inline-"true" data-rel-"back" data-theme="a"> 不 同意 ! 


</a><a href-"javascript:agree();" data-role-"button" data-inline="true"> 同 意 ! </a> 
</div> 


(3) 处 理 按钮 进程 ， 具 体 代码 如 下 。 


<script> 
function agree(){ 
IIprocess dialog... 


liclose dialog 
$('.ui-dialog").dialog('close"); 
) 
</script> 
</div> 
</body> 
</html> 


本 实例 执行 后 的 初始 效果 如 图 15-12 所 示 。 


15-12 ”初始 执行 效果 
单 击 “ 会 员 注册 条 款 ” 链 接 后 进入 如 图 15-13 所 示 的 对 话 框 界 面 效 果 。 


你 同意 上 述 条 款 吗 ? 


图 15-13 对话 框 界面 效果 


15.4.2 ”使 用 操作 表 


在 jQuery Mobile 应 用 中 ， 除 了 传统 的 对 话 框 之 外 ， 还 可 以 将 对 话 框 设计 为 一 个 操作 表 (action 
sheet) 。 具 体 实现 比较 简单 ， 只 需 移 除 标 题 并 添加 较 少 的 样式 styling〉 更 新 即 可 。 操 作 表 通常 用 来 
请 求 一 个 来 自用 户 的 响应 。 为 了 方便 起 见 ， 当 对 话 框 关闭 时 建议 自动 应 用 相反 的 转换 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 系统 中 实现 操作 表 效 果 的 基本 方法 。 
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实例 15-6: 在 Android 系统 中 实现 操作 表 效 果 
源码 路 径 : 光盘 :\codes\1S\biaol.html 


实例 文件 biaol.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 
«meta charset="utf-8"> 
<title>Action Sheet Example #1</title> 
<meta name="viewport" content-"width-device-width, initial-scale=1"> 
«link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/iquery.mobile-1.0.min.css" /> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


<l-- First Page --> 
«div data-role-"page" id="home"> 
<div data-role-"header"» 
<h1> 动 作 操作 表 </h1> 
</div> 


«div data-role="content"> 
«a href="#logout" data-transition="slidedown"> 离 开 页 面 </a> 
</div> 
</div> 


«div data-role-"dialog" id-"logout"» 
<div data-role-"content'data-theme-"b"» 
«span class="title"> 你 确定 吗 ， 亲 ?</span> 


«a href-"ithome" data-role="button" data-theme="b"> 非 常 确定 </a> 
«a href="#home" data-role-"button" data-theme-"c" data-rel="back"> 不 离开 了 </a> 
</div> 
<style> 
span.title { display:block; text-align:center; margin-top:10px; margin-bottom:20px; ) 
</style> 
</div> 
</body> 
</html> 


在 上 述 实例 代码 中 ， 通 过 使 用 属性 data-theme 简单 地 为 所 有 的 jQuery Mobile 组 件 添加 对 比 度 和 样 
式 。 在 实例 15-5 中 ， 可 以 设置 背景 和 按钮 的 主题 ， 当 设计 对 话 框 按钮 时 ， 通 常会 为 取消 按钮 和 动作 按 
钮 的 样式 添加 对 比 度 。 执 行 后 的 初始 效果 如 图 15-14 所 示 。 


15-14 初始 执行 效果 
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单 击 “ 离 开 页 面 ” 后 会 弹出 一 个 操作 表 效 果 的 对 话 框 ， 如 图 15-15 所 示 。 


你 确定 吗 ， 亲 ? 


15-15 ”操作 表 效果 的 对 话 杠 


在 现实 应 用 中 ， 通 常 使 用 操作 表 来 收集 用 户 发 起 的 任务 的 确认 信息 。 另 外 ， 操 作 表 也 可 以 针对 当 
前 的 任务 为 用 户 提供 一 系列 选项 ， 具 体 说 明 如 下 。 
加 ”一 个 操作 表 至 少 包含 两 个 按钮 ， 它 可 以 让 用 户 选择 如 何 完成 他 们 的 任务 。 
回 包含 一 个 取消 按钮 ， 以 允许 用 户 放弃 任务 。 取 消 按 钮 位 于 操作 表 的 底部 ， 以 促使 用 户 在 做 出 
选择 之 前 阅读 了 所 有 的 选项 。 取 消 按钮 的 颜色 应 该 与 背景 的 颜色 相同 。 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详细 讲解 在 Android 系统 中 实现 多 选项 操作 表 效 果 的 基本 方法 。 


c | 实例 15-7. 在 Android 系统 中 实现 多 选项 操作 表 效 果 


源码 路 径 : 光盘 :codes\lSVbiaol5html ————— 0000000000000 00000 
本 实例 的 功能 是 ， 通 过 操作 表 为 用 户 提供 一 系列 可 选择 的 选项 。 实 例文 件 biao15.html 的 具体 实现 
代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>Action Sheet Example #2</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


<l-- First Page --> 
<div data-role="page" id="home"> 
<div data-role="header"> 
<h1> 你 要 干 么 </h1> 
</div> 


<div data-role="content"> 
«a href="#logout" data-transition="slidedown"> 分 享 视频 </a> 
</div> 
</div> 


«div data-role="dialog" id="logout"> 
<div data-role="content" data-theme="b"> 


e. 
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«span class="title"> 将 视频 分 享 到 ?</span> 


«a href-"ithome" data-role="button" data-theme="b"> 新 浪 微 博 </a> 

«a href="#home" data-role-"button" data-theme="b"> 腾 讯 微 博 </a> 

<a href="#home" data-role="button" data-theme="b"> 搜 狐 微 博 </a> 

<a href="#home" data-role="button" data-theme="d" data-rel="back"> 我 的 微 信 </a> 
</div> 
<style> 

span.title { display:block; text-align:center; margin-top:10px; margin-bottom:20px; } 
</style> 

</div> 


</body> 
</html> 
上 述 代 码 执行 后 的 初始 效果 如 图 15-16 所 示 。 单 击 “ 分 享 视频 ”链接 后 会 弹出 一 个 多 选项 的 操作 


表 ， 如 图 15-17 所 示 。 
将 视频 分 享 到 ? 
NELLE 


QEIEL CIEN 
na 我 的 微 信 
图 15-16 初始 执行 效果 图 15-17 多 选项 的 操作 表 


15.4.3 ”实现 警告 框 


在 移动 网 站 中 ， 通常 使 用 警告 框 显 示 可 以 影响 应 用 程序 使 用 的 重要 信息 。 警 告 按钮 可 以 是 浅 颜色 
也 可 以 是 深 颜色 。 对 于 单 按钮 的 警告 来 说 ， 按 钮 总 是 浅 颜色 的 ， 对 于 有 两 个 按钮 的 警告 ， 左 边 的 按钮 
总 是 深 颜色 的 ， 而 右边 的 按钮 总 是 浅 颜 色 的 。 

在 jQuery Mobile 应 用 中 ， 如 果 在 一 个 包含 两 个 按钮 的 对 话 框 中 提出 了 一 个 肯定 的 动作 ， 而 且 用 户 
很 有 可 能 会 选择 这 个 动作 ， 则 取消 该 动作 的 按钮 应 该 位 于 右边 ， 而 且 是 浅 颜 色 的 。 在 通常 情况 下 ， 执 
行 有 风险 的 动作 的 按钮 是 红色 的 。 

人 4 框 效果 的 基本 方法 。 


”实例 15-8: 统 中 实现 警告 框 效果 
源码 路 径 : 光盘 :\codes\15\jing html 


实例 文件 jing.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 
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«meta charset="utf-8"> 
<title>Alert Example</title> 
«meta name="viewport" content-"width-device-width, initial-scale2 1" 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
.Ui-header .ui-title, .ui-footer .ui-title ( margin-right: 0 !important; margin-left: 0 !important; } 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


<l-- First Page --> 
<div data-role="page" id="home"> 
<div data-role="header"> 
<h1> 演 示警 告 框 的 用 法 </h1> 
</div> 


<div data-role="content"> 
«a href="#alert" data-transition="slidedown"> 警 告 框 </a> 
</div> 
</div> 


<l-- Second Page/Dialog --> 
<div data-role="dialog" id="alert"> 
«div data-role="header"> 
<h1>Connection Required</h1> 
</div> 


<div data-role="content" data-theme="b"> 

注意 ， 有 一 个 网 络 连接 需要 同步 你 的 数据 ， 人 允许 吗 ? «br» 

<br> 

«a href-"ithome" data-role="button" data-theme-"c" data-rel="back"> 允 许 </a> 

</div> 

</div> 
</body> 
</html> 


上 述 代 码 执行 后 的 初始 效果 如 图 15-18 所 示 。 单 击 “ 警 告 框 ” 链 接 后 会 弹出 一 个 警告 框 ， 效 果 如 
图 15-19 所 示 。 


Connection Required 


注意 ， 有 一 个 网 络 连接 需要 同步 你 的 数 
据 ,允许 吗 ? 


图 15-18 初始 执行 效果 图 15-19 警告 框 效果 
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15.5 有 媒体 查询 的 响应 式 布局 


EB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 15 章 \ 有 媒体 查询 的 响应 式 布局 .avi 
在 jQuery Mobile 应 用 中 ， 如 果 想 创建 响应 式 设计 ， 建 议 使 用 CSS 3 Media Queries 〈 媒 体 查 绚 ) 。 
例如 想 为 一 个 特定 设备 的 朝向 增强 布局 , 可 以 使 用 媒体 查询 来 检测 设备 的 朝向 , 然后 根据 需要 应 用 CSS 
修改 。 代 码 如 下 。 
@media (orientation:portrait)( 
/在 此 使 用 纵向 增强 
} 
@media(orientation:landscape}{ 
/在 此 使 用 横 屏 方向 的 增强 
) 


下 面 讲解 jQuery Mobile 的 响应 式 设计 如 何 良好 地 应 用 于 竖 屏 〈portrait) 模式 和 横 屏 Clandscape? 
模式 中 的 表单 字段 。 例 如 ， 在 竖 屏 视图 中 标签 位 于 表单 字段 的 上 面 ， 而 当 将 设备 横 屏 放置 时 表单 字段 
和 标签 并 排 显示 。 这 种 响应 式 设 计 可 以 基于 设备 可 用 的 屏幕 真实 状态 提供 最 实用 的 体验 。 jQuery Mobile 
为 用 户 提 供 了 很 多 这 样 优秀 的 UX〈 用 户 体验 ) 原则 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 系统 中 实现 竖 屏 和 横 屏 自 适应 效果 的 基 
本 方法 。 


实例 文件 zishiying.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>Responsive Design Example</title> 
«meta name="viewport" content-"width-device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


<div data-role="page"> 
«div data-role="header"> 
<h1> 会 员 注 册 </h1> 
</div> 


<div data-role="content"> 
<label for="username"> 用 户 名 :</label> 
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«input type="text" name-"username" id-"username" value=”/> 


<label for="password"> 密 码 :</label> 
<input type="password" name-"password" id-"password" value=”/> 
</div> 
</div> 
</body> 
</html> 


上 述 代码 执行 后 的 效果 如 图 15-20 所 示 ， 如 果 将 设备 纵向 放置 ， 则 注册 表单 将 自动 旋转 ， 实 现 自 


图 15-20 ”执行 效果 


在 上 述 实 例 代 码 中 , 通过 使 用 min-max 宽度 媒体 特性 ,jQuery Mobile 能 够 应 用 响应 式 设计 。 例如， 
当 浏览 器 支持 的 宽度 大 于 450px 时 ， 表 单元 素 可 以 浮动 在 它们 的 标签 旁边 。CSS 支持 文本 输入 的 这 种 
行为 ， 如 下 所 示 。 

label.ui-input-text( 

display:block; 

) 

(Qmedia all and (min-width: 450px)( 

label.ui-input-text(display:inline-block; ) 

) 


第 16 章 实现 导航 功能 


导航 是 一 个 网 页 的 门面 ， 在 整个 网 站 中 有 非常 重要 的 作用 。 在 jQuery Mobile 开发 应 用 中 ， 可 以 使 
用 页 眉 、 页 脚 栏 、 工 具 栏 和 标签 栏 实现 网 页 的 导航 功能 。 其 中 ， 页 眉 和 页 脚 都 属于 jQuery Mobile 的 组 
件 。 本 章 将 详细 讲解 在 jQuery Mobile 中 实现 页 面 导航 的 基本 知识 ， 为 读者 步 入 本 书后 面 知 识 的 学 习 打 
下 基础 。 
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名 4 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 16 章 \ 页 眉 栏 .avi 

在 jQuery Mobile 应 用 中 ， 页 眉 通 常用 于 显示 页 面 标题 ， 还 可 以 包含 控件 ， 如 添加 用 于 导航 的 按钮 
或 用 来 管理 页 面 中 项 目的 控件 ， 以 辅助 用 户 在 屏幕 中 进行 导航 或 管理 对 象 。 尽 管 页 眉 是 可 选 的 ， 但 是 
它 通常 用 来 提供 活动 页 面 的 标题 。 


16.1.1 页 眉 基 础 


在 移动 网 站 的 设计 应 用 中 ， 使 用 属性 data-role="header" 来 定义 页 眉 。 页 眉 是 一 个 可 选 的 组 件 。 页 眉 
中 的 回 退 按钮 不 会 在 页 眉 中 显示 ， 除 非 显 式 地 启用 。 可 以 使 用 属性 date-theme 来 调整 页 眉 的 主题 。 如 果 
没有 为 页 眉 设 置 主题 ， 则 它 会 继承 页 面 组 件 的 主题 。 默 认 的 主题 是 黑色 (black) 的 ， 即 data-theme-"a". 

在 默认 情况 下 ， 所 有 的 页 眉 级 别 (hl 一 h6) 具有 相同 的 风格 ， 以 维持 视觉 上 的 连贯 性 。 通 过 添加 
data-position="fixed" 属 性 ， 可 以 对 页 眉 进 行 固定 。 

页 眉 的 基本 用 途 是 显示 活动 页 面 的 标题 ， 在 网 站 中 使 用 页 眉 最 简单 的 形式 如 下 。 

«div data-role="header"> 


<h1>Header Title</h1> 
</div> 


16.1.2 ”实现 页 收 定 位 


在 设计 过 程 中 ， 有 如 下 3 种 样式 可 以 用 于 定位 页 眉 。 
1. Default (BR) 
默认 的 页 眉 会 在 屏幕 的 顶部 边缘 显示 ， 而 且 在 屏幕 滚动 时 ， 页 眉 会 滑 到 可 视 范 围 之 外 。 


«div data-role-"header" 
<hl>Default Header</h1> 
</div> 
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2. Fixed (HÆ) 


司 定 的 页 眉 总 是 位 于 屏幕 的 顶部 边缘 位 置 ， 而 且 总 是 保持 可 见 。 但 是 ， 在 屏幕 深 动 的 过 程 期 间 ， 
页 眉 是 不 可 见 的 ， 当 滚动 结束 之 后 才 重 新 出 现 。 通 过 添加 data-position="fixed" 属 性 ， 可 以 创建 一 个 
定 的 页 眉 。 

«div data-role-"header" data-position="fixed"> 

«h1»Fixed Header</hl> 

</div> 

3. Responsive (响应 式 ) 


创建 一 个 全 屏 页 面 时 ， 会 全 屏 显 示 页 面 中 的 内 容 ， 而 页 眉 和 页 脚 则 基于 触摸 响应 来 出 现 或 消失 。 
对 于 日 常 开发 中 显示 照片 和 播放 视频 的 应 用 来 说 ， 全 屏 模 式 相 当 有 用 。 在 jQuery Mobile 应 用 中 ， 要 创 
建 一 个 全 屏 的 页 面 ， 需 要 在 页 面容 器 中 添加 如 下 代码 。 


data-fullscreen-"true" 

然后 在 页 眉 和 页 脚 元 素 中 添加 如 下 所 示 的 属性 。 

data-position-"fixed" 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 通过 页 眉 定 位 实现 全 屏 显示 的 方法 。 


mni 


实例 文件 position-full.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>Fullscreen Example</title> 
<meta name="viewport" content="width=device-width, maximum-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
.detailimage { width: 100%; text-align: center; margin-right: 0; margin-left: 0; } 
.detailimage img ( width: 100%; } 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/iquery.mobile-1.0.min.js"></script> 
</head> 
<body> 
«div data-role-"page" data-fullscreen="true"> 
«div data-role-"header" data-position-"fixed"» 
<h6>4/10</h6> 
</div> 


<div data-role="content"> 
«div class="detailimage"><img src-"images/1216.jpg" /></div> 
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<Jdiv> 


«I— toolbar with icons 一 > 
«div data-role-"footer" data-position-"fixed"^ 
«div data-role-"navbar"» 
<ul> 

<li><a href="#" data-icon="forward"></a></li> 
<li><a href="#" data-icon="arrow-"></a></li> 
<li><a href="#" data-icon="arrow-r"></a></li> 
<li><a href="#" data-icon="delete"></a></li> 


<lul> 
</div> 
</div> 
</div> 
</body> 
</html> 


执行 上 述 代码 后 ， 将 首先 显示 一 个 有 页 眉 的 页 面 ， 如 图 16-1 所 示 。 


图 16-1 有 页 眉 的 效果 


如 果 用 户 轻 融 屏幕 ， 则 页 眉 和 页 脚 会 消失 ， 这 样 便 形 成 了 一 个 全 屏 显 示 效 果 ， 如 图 16-2 所 示 。 若 
要 显示 页 眉 和 页 脚 ， 再 次 轻 敲 屏幕 即 可 。 


图 16-2 ”页 眉 和 页 脚 消失 后 全 屏 显 示 
在 本 实例 中 有 一 个 照片 查看 器 ， 而 且 其 页 眉 显 示 照 片 的 计数 信息 ， 页 脚 显 示 一 个 工具 栏 以 辅助 导 
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航 、 发 送 电子 邮件 或 删除 照片 。 
16.1.3 ”在 页 眉 中 使 用 按钮 


在 jQuery Mobile 应 用 中 ， 有 时 可 能 需要 在 页 眉 中 添加 控件 。 例 如 在 编辑 数据 时 ， 经 常会 用 到 “ 保 
存 ” 和 “取消 ”按钮 。 可 以 添加 到 页 眉 中 的 按钮 有 3 种 类 型 ， 具 体 说 明 如 下 。 

(1) 只 带 有 文本 的 按钮 。 

(2) 只 带 有 图 标的 按钮 ， 需 要 添加 如 下 两 个 属性 。 

E] data-icon. 

E] data-iconpos-"notext". 

(3) 既 有 文本 又 有 图 标的 按钮 。 这 种 类 型 的 按钮 也 需要 添加 data-icon 属性 。 

不 同类 型 的 按钮 示例 如 下 。 


<! 一 只 带 有 文本 的 按钮 -> 

<a href="#">Done</a> 

<!-- 只 带 有 图 标的 按钮 -> 

«a href="#" data-icon="plus" data-iconpos="notext"></a> 
<!-- 既 有 文本 又 有 图 标的 按钮 一 > 

<a href="#" data-icon="check">Done</a> 


下 面 将 详细 讲解 上 述 页 眉 按钮 的 基本 知识 。 
1. 既 有 文本 又 有 图 标的 按钮 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 页 眉 中 实现 既 有 文本 又 有 图 标的 按钮 效果 的 方法 。 


实例 16-2: 在 页 眉 中 实现 既 有 文本 又 有 图 标的 按钮 效果 
源码 路 径 : 光盘 :\codes\16\buttons html 


实例 文件 buttons.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
«title» Header Example</title> 
«meta name-'"viewport" content-"width-device-width, initial-scale-1"» 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«script src-"http://code.jquery.com/jquery-1.6.4.min.js"» «/script» 
«script src-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"»«/script» 
</head> 
<body> 
<div data-role="page" data-theme="b"> 
<div data-role="header" data-position="inline"> 
«a href="#" data-icon="delete"> 取 消 </a> 
<h1> 发 布 评论 </h1> 
«a href="#" data-icon="check"> 完 成 </a> 
</div> 
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<div data-role="content"> 
<fieldset data-role="controlgroup" data-theme="c"> 
<legend> 评 分 :</legend> 
«input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" data-theme="c"/> 
«label for="radio-choice-1"> 我 去 看 看 </label> 


«input type-"radio" name="radio-choice-1" id-"radio-choice-2" value-"choice-2" data-theme-"c" /> 
<label for="radio-choice-2"> 不 好 看 ， 不 看 了 </label><br> 


«label for="comments"> 内 容 :</label> 
<textarea cols="40" rows="8" name-"comments" id-"comments" data-theme="d"></textarea> 
</fieldset> 
</div> 
</div> 
</body> 
</html> 


上 述 实 例 代 码 执行 后 的 效果 如 图 16-3 所 示 。 


我 去 看 看 


不 好 看 ， 不 看 了 


图 16-3 执行 效果 


在 图 16-3 所 示 的 执行 效果 中 ， 页 眉 中 带 有 一 个 “取消 ”按钮 和 一 个 “完成 ”按钮 ， 用 来 辅助 管理 
评论 的 信息 。 在 上 述 实例 代码 中 ， 按 钮 被 设计 为 一 个 普通 的 链接 。 可 以 通过 属性 data-icon 为 每 一 个 按 
钮 设置 一 个 图 标 。 在 页 眉 的 内 部 ， 按 钮 会 根据 它们 的 语义 顺序 进行 放置 。 例 如 ， 第 一 个 按钮 是 左 对 齐 
的 ， 第 二 个 按钮 是 右 对 齐 的 。 如 果 页 眉 只 包含 一 个 按钮 ， 可 以 通过 将 属性 class="ui-btn-right" 添 加 到 按 
钮 的 标记 中 的 方法 来 右 对 齐 按钮 。 

2. 只 有 图 标的 按钮 

在 jQuery Mobile 中 包含 多 个 标准 图 标 , 使 用 这 些 标准 图 标 可 以 创建 只 带 有 图 标的 按钮 。 例如 , info 
图 标 通常 与 flip 一 起 使 用 ， 来 显示 配置 选项 或 更 多 的 信息 。 在 使 用 标准 图 标 时 ， 只 会 占用 很 小 的 屏幕 
空间 ， 而 且 它们 的 含义 在 所 有 的 设备 上 都 是 相对 一 致 的 。 假 如 想 要 添加 一 个 条 目 到 现 有 的 一 个 列表 中 ， 
可 以 选择 一 个 plus 图 标 ， 用 户 通过 该 图 标 可 以 添加 一 个 条 目 到 列表 中 。 
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在 本 实例 页 面 中 显示 了 一 个 电视 剧 评论 列表 ， 单 击 国 图 标 可 创建 新 的 评论 。 要 创建 一 个 只 带 有 图 
标的 按钮 ， 需 要 添加 两 个 专用 的 属性 。 实 例文 件 icons.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Header Example</title> 
«meta name="viewport" content-"width-device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
.Ui-li-heading { overflow: visible; } 
.ui-li-thumb { top: 1em; ) 
.ui-li-rating ( font-size: 32px; ) 
</style> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


<div data-role="page" data-theme="b"> 
«div data-role="header"> 
<h1> 评 论 信息 </h1> 
«a href="#" data-icon-"plus" data-iconpos-"notext" class-"ui-btn-right"» «/a» 
</div> 


<div data-role="content"> 
«ul data-role-"listview" data-inset-"true" data-theme="e"> 
<li data-role-"list-divider"» 38] r8 & «/li» 
«Ji» 
«img src-"images/456 jpg" 
<h3> 戎 芦 兄弟 </h3> 
<p><span class="ui-li-rating">90%</span><strong> 喜欢 看 !</strong></p> 
<p> 用 户 评价 : <em>1,888,888,8</em></p> 
«lli» 
«Jul» 


<ul data-role-"listview" data-inset-"true" data-theme-"d"» 
«li data-role="list-divider"> 用 户 评论 列表 </li> 
«li» 
«a href="#"> 
«img src-"images/user.png" class-"ui-li-icon"» 
<p><strong> 去 看 看 !</strong></p> 
<p> 非 常 精彩 ,非常 精彩 ,非常 精彩 ,非常 精彩 ,非常 精彩 ,非常 精彩 ,非常 精彩 ,非常 精彩 ,非常 精 
彩 .</p> 
<la> 
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«lli» 
<li> 
<a href="#"> 
<img src="images/user.png" class="ui-li-icon"> 
<p><strong> 去 看 看 !</strong></p> 
<p> 非 常 精彩 ,</p> 
<la> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/user.png" class-"ui-li-icon"» 
<p><strong> 去 看 看 !</strong></p> 
<p> 非 常 精彩 ,非常 精彩 ,非常 精彩 .</p> 
<la> 
«li» 
<li> 
<p><a href="##> 显 示 更 多 的 评论 ...</a></p> 
<p>120 页 共 1188 条 评论 </p> 
«li» 
«Iul» 
</div> 
</div> 
</body> 
</html> 


上 述 实 例 代码 执行 后 的 效果 如 图 16-4 所 示 。 
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164 执行 效果 
16.1.4 在 页 眉 中 使 用 分 段 控件 


f£ jQuery Mobile 应 用 中 ， 除 了 在 页 眉 中 使 用 按钮 之 外 ， 还 可 以 使 用 分 段 控件 。 分 段 控 件 是 一 组 常 
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见 的 内 联 控件 ， 每 个 控件 都 可 以 显示 一 个 不 同 的 视图 。 

在 具体 使 用 分 段 控 件 时 ， 建 议 将 其 放置 在 主页 眉 中 。 如 果 将 页 眉 作为 一 个 固定 控件 来 放置 ， 则 可 
以 让 分 段 控 件 与 主页 眉 实现 无 缝 集成。 通过 添加 少量 的 样式 更 新 方式 ， 可 以 实现 一 个 允许 用 户 以 不 同 
视图 来 快速 查看 数据 的 分 段 控 件 效果 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 页 眉 中 使 用 分 段 控 件 的 方法 。 


实例 16-4: 在 页 眉 中 使 用 分 段 控 件 
源码 路 径 : 光盘 :\codes\16\fenduan html 


实例 文件 fenduan.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>Segmented Control Example</title> 
«meta name-"viewport" content-"width-device-width, initial-scale=1"> 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«style» 
.segmented-control ( text-align:center;) 
.segmented-control .ui-controlgroup ( margin: 0.2em; } 
.ui-control-active, .ui-control-inactive ( border-style: solid; border-color: gray; ) 
.ui-control-active ( background: #BBB; ) 
.ui-control-inactive ( background: DDD; ) 
</style> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role="page"> 
«div data-role-"header" data-position="fixed"> 
<h1> 精 彩 影视 </h1> 
<div class="segmented-control ui-bar-d"> 
«div data-role-"controlgroup" data-type="horizontal"> 
«a href="#" data-role-"button" class="ui-control-active"> 剧 院 模式 </a> 
«a href="#" data-role-"button" class="ui-control-inactive"> 马 上 回来 </a> 
«a href="#" data-role="button" class="ui-control-inactive"> 最 受 欢 迎 的 </a> 
</div> 
</div> 
</div> 


«div data-role="content"> 
«ul data-role="listview"> 
«li» 

«a href="#"> 
«img src-"images/111 jpg" /> 

<h3> 变 形 金刚 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
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<la> 
«lli» 
<li> 
<a href="#"> 
<img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
<la> 
«li 
<li> 
<a href="#"> 
«img src-"images/3316.jpg" /> 
<h3> 雷 雨 </h3> 
<p> 评 论 PG-13</p> 
<p> 时 长 : 131 min.</p> 


<la> 
«lli» 
<li> 
<a href="#"> 
«img src-"images/444 jpg" /> 
<h3> 小 李 飞 刀 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
«lli» 
«Iul» 
</div> 
</div> 
</body> 
</html> 


本 实例 的 执行 效果 如 图 16-5 所 示 。 


A| 3 上 加 来 | aana | 


变形 金刚 
评论 : PG 
时 长: 95 min. 


Xx 
评论 : PG-13 
时 长 : 137 min. 


雷雨 
评论 pG.13 
对 长: 131 min. 


小 李 飞 刀 
Fie: PG 
时 长 : 95 min 
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在 上 述 实例 代码 中 ， 分 段 控 件 可 以 按照 特定 的 分 类 来 显示 电影 。 该 分 段 控 件 允 许 用 户 通过 选择 的 
分 类 (“剧院 模式 ”、“ 马 上 回来 ”或 “最 受 欢迎 的 ”) 来 切换 模式 。 

另外 ， 在 现实 应 用 中 ， 如 果 页 眉 或 页 脚 的 标题 过 长 ， 则 jQuery Mobile 会 将 信息 进行 截断 处 理 。 也 
就 是 说 ， 当 文本 太 长 时 jQuery Mobile 会 截断 文本 ， 并 在 文本 的 末尾 添加 一 个 省 略 号 。 如 果 这 时 希望 显 
示 完 整 的 文本 ， 则 可 以 通过 调整 CSS 选择 器 的 方式 来 实现 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 使 用 CSS 选择 器 修复 被 截断 文本 的 方法 。 


实例 16-5: 在 Android 修复 被 截断 的 文本 
源码 路 径 : 光盘 :\codes\16\fixed.html 


实例 文件 fixed.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 截 断 修复 </title> 
«meta name-'"viewport" content-"width-device-width, initial-scale=1"> 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«script src-"http://code.jquery.com/jquery-1.6.4.min.js"» «/script» 
«style» 
.ui-header .ui-title, .ui-footer .ui-title ( margin-right: 0 important; margin-left: 0 important; } 
</style> 
<script src="http://code.jquery.com/mobile/1.0/iquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role="page" id="home" data-title="Welcome"> 
<div data-role="header"> 
<h1> 显 示 一 个 很 长 的 头 </h1> 
</div> 


<div data-role="content"> 
将 截断 的 头 :<br><br> 
<em>.ui-header .ui-title, .ui-footer .ui-title{<br> 
<strong>&nbsp;&nbsp;&nbsp;&nbsp;margin-right: 0 !important; <br> 
&nbsp;&nbsp;&nbsp;&nbsp;margin-left: 0 !important; </strong></em><br> 
) 
</div> 
</div> 


</body> 
</html> 


上 述 实 例 代 码 执行 后 的 效果 如 图 16-6 所 示 。 
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将 截断 的 头 : 


.ui-header .ui-title, .ui-footer .ui-titlef 
margin-right: 0 !'important; 
margin-left: 0 !'important; 

$ 


图 16-6 执行 效果 
16.1.5 “实现 回 退 按钮 效果 


在 移动 设备 应 用 中 ， 经 常 使 用 回 退 按钮 返回 到 上 一 步 的 操作 中 。 在 jQuery Mobile 应 用 中 ， 可 以 全 
局 自动 启用 或 禁用 回 退 按钮 ， 并 且 还 可 以 逐 页 面 添加 或 移 除 该 按钮 。 
1. 在 页 眉 中 添加 回 退 按钮 
在 jQuery Mobile 中 ， 回 退 按钮 在 默认 情况 下 是 禁用 的 。 如 果 想 让 回 退 按钮 出 现在 页 眉 内 ， 可 以 通 
过 如 下 两 种 方式 来 进行 添加 。 
(1) 在 页 面容 器 中 添加 data-auto-back-btn="true" 属 性 ， 为 某 个 特定 页 面 添 加 回 退 按钮 。 
(2) 在 绑 定 mobileinit 选项 时 ， 将 addBackBtn 选项 设置 为 tue， 这 样 即 可 在 全 局 启用 回 退 按钮 。 
在 设置 该 选项 之 后 ， 如 果 有 页 面 存在 于 历史 访问 记录 中 ， 回 退 按钮 会 自动 显现 。 在 后 台 ， 回 退 按钮 只 
是 执行 window.history.back() 方 法 。 具 体 代 码 如 下 。 
<!-- 显 示 按 钮 和 重 写 默认 的 返回 按钮 的 文本 -> 
«div data-role-"page" data-add-back-btn-"true" data-back-btn-text="Previous"> 
// 全 局 启用 后 退 按钮 ， 设 置 默认 的 返回 按钮 的 文本 ， 并 重新 设置 按钮 的 主题 
$(document).bind(mobileinit,function(){f 
$.mobile.page.prototype.options.addBackBtn-true; 
$.mobile.page.prototype.options.backBtnText-"Previous"; 
$.mobile.page.prototype.options.backBtnTheme-"b"; 
P: 
另外 , 也 可 以 重 写 回 退 按钮 的 默认 文本 和 主题 。 例如 , 通常 会 使 用 上 一 个 页 面 的 标题 来 标记 ClabeD 
回 退 按 钮 ， 属 性 data-back-btn-text 就 经 常 这 样 被 使 用 。 
此 外 ， 如 果 在 全 局 启用 了 回 退 按钮 ， 可 以 通过 在 页 面 页 眉 中 添加 属性 data-add-back-btn="false" 的 
方式 禁用 特定 页 面 上 的 回 退 按钮 ， 即 从 特定 页 面 的 页 眉 中 移 除 回 退 按钮 。 


«div data-role-"header" data-add-back-btn="false"> 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 页 眉 中 实现 回 退 按钮 效果 的 方法 。 


K 实例 16-6: 在 页 眉 中 实现 回 退 按钮 效果 
b 源码 路 径 : 光盘 :\codes\16\back html 


实例 文件 backhtml 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 
<html> 
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<head> 
«meta charset-"utf-8" 
title» Contact«/title» 
«meta name-'"viewport" content-"width-device-width, initial-scale=1"> 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«script src-"http://code.jquery.com/jquery-1.6.4.min.js"» «/script 
«script src-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min js" «/script^ 
</head> 
<body> 
<div data-role="page" id="home"> 
<div data-role="header"> 
<h1> 返 回 演示 </h1> 
</div> 
«div data-role="content"> 
<a href="#back"> 点 击 观看 详情 </a> 
</div> 
</div> 
<div data-role-"page" data-add-back-btn-"true" id="back"> 
«div data-role-"header"» 
<h1> 联 系 我 们 </h1> 
</div> 
«div data-role="content"> 
«ul data-role-"listview" data-inset="true"> 
<li data-role-"list-divider"» Ek RA 5 «/li» 
<li><a href="#"><img src-"images/75-phone.png" altz"Call" class="ui-li-icon"> 电 话 </a></li> 
<li><a href="#"><img src-"images/18-envelope.png" alt-"Email" class-"ui-li-icon"» $48 «/a» «/li» 
<li><a href="#"><img src-"images/09-chat-2.png" alt-"SMS" class-"ui-li-icon"»5g1& «/a» «/li» 
<li><a href="#"><img src-"images/1016-map.png" alt-"Directions" class-"ui-li-icon"» 其 他 


«Ja»«lli» 
«Iul» 
</div> 
</div> 
</body> 
</html> 


本 实例 执行 后 将 首先 显示 一 个 链接 主页 ， 如 图 16-7 所 示 。 单 击 “ 点 击 观看 详情 ”链接 后 会 进入 一 


个 新 界面 ， 在 新 界面 中 显示 了 一 个 回 退 按钮 ， 如 图 16-8 所 示 。 单 击 回 退 按钮 国 开 后 ,会 返回 到 图 16-7 
所 示 的 链接 界面 。 
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点 击 戏 看 详情 


H 


图 16-7 链接 主页 图 16-8 页 眉 中 有 回 退 按钮 


2. 在 页 眉 中 添加 回 退 链接 

在 jQuery Mobile 应 用 中 ， 如 果 希 望 创建 一 个 行为 与 回 退 按钮 相 类 似 的 链接 ， 则 可 以 为 任何 锚 元 素 
添加 data_rel="back" 属 性 。 具 体 代码 如 下 。 

«a href="home.html" data-rel="back" data-role="button"> 返 回 </a> 

通过 使 用 data-rel="back" 属 性 , 链接 将 会 模拟 回 退 按钮 , 返回 一 个 历史 条 目 Cwindow.history.backO) ， 
并 忽略 链接 的 默认 href 值 。 对 于 C 级 浏览 器 或 不 支持 JavaScript 的 浏览 器 来 说 ， 它 们 会 忽略 data-rel, 
而 且 将 属性 href 作为 一 个 备用 。 
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鳄 1 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 16 章 \ 页 脚 栏 .avi 

在 jQuery Mobile 应 用 中 ， 页 脚 栏 和 页 眉 栏 的 组 件 几 乎 相同 ， 只 是 位 置 不 同 而 已 。 页 眉 栏 通常 在 项 
部 ， 而 页 脚 栏 通常 在 底部 。 在 使 用 页 眉 时 ， 第 一 个 按钮 是 左 对 齐 的 ， 而 第 二 个 按钮 是 右 对 齐 的 。 而 页 
脚 则 是 以 从 左 到 右 的 顺序 直线 放置 它 的 按钮 。 本 节 将 详细 讲解 页 脚 栏 的 基本 知识 。 


16.2.1 页 脚 基 础 知识 


在 jQuery Mobile 应 用 中 ， 与 页 脚 相关 的 一 些 要 点 如 下 。 
页 脚 使 用 属性 data-role="footer" 来 定义 。 
页 脚 按照 从 左 到 右 的 顺序 直线 放置 它 的 按钮 。 这 种 灵活 性 可 以 用 来 创建 工具 栏 或 标签 栏 。 
页 脚 是 一 个 可 选 的 组 件 。 
使 用 data-theme 属性 可 以 调整 页 脚 的 主题 。 如 果 不 为 页 脚 设 置 主题 ， 则 它 会 继承 页 面 组 件 的 
主题 。 默 认 的 主题 是 黑色 的 (data-theme="a" )。 

回 ”通过 添加 data-position="fixed" 属 性 ， 可 以 固定 页 脚 的 位 置 。 

加 ”在 默认 情况 下 ， 所 有 的 页 脚 级 别 (h1~h6) 具有 相同 的 风格 ， 以 维持 视觉 上 的 一 致 性 。 

在 现实 应 用 中 ， 最 简单 的 页 脚 形式 如 下 面 的 代码 所 示 。 

«div data-role-"footer"» 

<!-- 在 此 添加 页 脚 文 本 或 按钮 > 

</div> 

data-role="footer" 是 唯一 需要 设置 的 属性 ， 在 页 脚 内 可 以 包含 任何 语义 HTML。 页 脚 通 常 包含 工具 
栏 和 标签 控件 。 工 具 栏 提供 了 一 组 用 户 可 以 在 当前 环境 中 使 用 的 动作 。 标 签 栏 则 可 以 允许 用 户 在 应 用 
程序 内 的 不 同 视图 之 间 进 行 切换 。 

下 面 通 过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 系统 中 使 用 页 脚 的 基本 方法 。 


实例 16-7: 在 Android 系统 中 使 用 页 脚 
源码 路 径 : 光盘 :\codes\16\foot.html 


RARA 


实例 文件 foot.html 的 具体 实现 代码 如 下 。 
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«IDOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Default Header Footer Example</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 页 头 </h1> 
</div> 


<div data-role="content"> 
在 默认 的 底部 位 置 时 ， 内 容 不 消耗 整个 装置 的 高 度 。 
</div> 


«div data-role="footer"> 
<h3> 页 脚 </h3> 
</div> 
</div> 
</body> 
</html> 


上 述 实例 代码 执行 后 的 效果 如 图 16-9 所 示 。 


169 执行 效果 


为 了 将 页 脚 内 容 定 位 在 屏幕 的 最 底部 显示 ， 可 以 为 页 脚 元 素 添加 属性 data-position="fixed"。 在 默 
认 情 况 下 ， 页 脚 位 于 内 容 的 后 面 ， 并 不 是 位 于 屏幕 底部 的 边缘 。 如 果 内 容 只 占据 了 一 半 的 屏幕 高 度 ， 
则 页 脚 会 出 现在 屏幕 的 中 央 位 置 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 , 详细 讲解 在 Android 系统 中 使 用 属性 data-position="fixed" 定 位 
页 脚 的 基本 方法 。 


e. 
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实例 16-8: 使 用 属性 data-position="fixed" 定 位 页 脚 
源码 路 径 : 光盘 :\codes\16\dingwei html 


实例 文件 dingwei.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 
«meta charset="utf-8"> 
<title>Fixed Header/Footer Example</title> 
«meta name-"viewport" content-"width-device-width, initial-scale=1"> 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«script src-"http://code.jquery.com/jquery-1.6.4.min.js"» «/script" 
«script src-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"»«/script" 
</head> 
<body> 


<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 定 位 页 头 </h1> 
</div> 


«div data-role="content"> 
<ul data-role="listview"> 
<li> 
<a href="#"> 
<img src="images/111.jpg" /> 
<h3>aaaaaaaaaa</h3> 
<p> 评 级 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/222 jpg" /> 
«h3»bbbbb«/h3» 
<p> 评 级 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
<la> 
«lli» 
«li 
«a href="#"> 
«img src-"images/3316.jpg" /> 
<h3>CCCCC</h3> 
<p> 评 级 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
<la> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/444 jpg" /> 
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<h3>DDDDD</h3> 
<p> 评 级 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/111.jpg" /> 
<h3>EEEEEE</h3> 
<p> 评 级 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
<la> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 级 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
<la> 
«lli» 
«Iul» 
</div> 
<div data-role="footer" data-position="fixed"> 
<h3> 定 位 页 脚 </h3> 
</div> 
</div> 


</body> 
</html> 


上 述 实 例 代码 执行 后 的 效果 如 图 16-10 所 示 。 
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图 16-10 执行 效果 
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16.2.2 ”页 脚 定位 


在 jQuery Mobile 应 用 中 ， 有 如 下 3 种 定位 页 脚 的 样式 。 

1. Default (默认 ) 

默认 的 页 脚 会 在 内 容 区 域 的 后 面 显 示 。 如 果 内 容 超出 了 视窗 的 高 度 ， 则 只 有 在 屏幕 滚动 到 内 容 的 
最 底部 时 才能 看 到 页 脚 。 代 码 如 下 。 


«div data-role-"footer"» 

<!-- 默 认 页 脚 --> 

</div> 

2. Fixed (HÆ) 

固定 的 页 脚 总 是 位 于 屏幕 的 底部 边缘 位 置 ， 而 且 总 是 保持 可 见 。 但 用 户 在 滚动 屏幕 的 过 程 中 ， 页 
脚 是 不 可 见 的 ， 只 有 当 深 动 结束 之 后 才 出 现 。 通 过 添加 data-position="fixed" 属 性 的 方式 ， 可 以 创建 一 
个 固定 的 页 脚 。 代 码 如 下 。 


«div data-role="footer" data-position="fixed"> 
<h3> 定 位 页 脚 </h3> 
</div> 


3. Responsive 《响应 式 ) 
当 创 建 一 个 全 屏 页 面 时 ， 页 面 中 的 内 容 会 出 现在 整个 屏幕 中 ， 而 页 眉 和 页 脚 则 基于 触摸 响应 来 出 


现 或 消失 。 对 显示 照片 和 播放 视频 应 用 来 说 ， 全 屏 模式 十 分 重要 。 要 创建 一 个 全 屏 的 页 面 ， 在 页 面容 
器 中 添加 data-fullscreen="true" 属 性 ， 然 后 在 页 眉 和 页 脚 元 素 中 添加 data-position="fixed" 属 性 。 


16.2.3 ”页 脚 按钮 


在 jQuery Mobile 应 用 中 ， 可 以 在 页 脚 中 添加 如 下 所 示 的 3 种 按钮 。 

(1) 只 带 有 文本 的 按钮 。 

这 种 样式 的 按钮 经 常用 在 工具 栏 内 ， 原 因 是 工具 栏 的 外 观 没 有 标签 栏 大 。 页 脚 内 的 正常 链接 会 作 
为 只 带 有 文本 的 按钮 来 显示 。 

«a href="#'> 文 本 </a> 


(2) 只 带 有 图 标的 按钮 。 
这 种 样式 的 按钮 也 可 以 用 于 工具 栏 中 ， 需 要 添加 如 下 所 示 的 两 个 属性 。 


E data-icon="notext"。 


El data-iconpos-"notext". 


例如 : 
«a href="#" data-icon-"plus" data-iconpos="notext"></a> 


G) 既 有 文本 又 有 图 标的 按钮 。 
这 种 样式 的 按钮 可 以 用 于 标签 栏 内 。 例 如 : 


«a href="#" data-icon-"home"» X zk «/a» 
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名 4 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 16 章 \ 工 具 栏 .avi 

在 jQuery Mobile 应 用 中 ， 工 具 栏 可 用 于 辅助 管理 当前 屏幕 中 的 内 容 。 当 用 户 需 要 执行 与 当前 屏幕 
中 的 对 象 相 关联 的 动作 时 ， 工 具 栏 会 非常 有 用 。 在 jQuery Mobile 应 用 中 构建 工具 栏 时 ， 可 以 选择 使 用 
图 标 或 文本 实现 。 


16.3.4 带 有 图 标的 工具 栏 
在 jQuery Mobile 应 用 中 ， 经 常 遇 到 只 有 图 标 构成 的 工具 栏 。 与 文本 构成 的 工具 栏 相 比 ， 带 有 图 标 


的 工具 栏 占据 的 屏幕 空间 更 少 。 在 选择 图 标 时 ， 需 要 选择 能 够 表达 正确 含义 的 标准 图 标 。 例 如 下 面 所 
示 的 实例 ， 演 示 了 在 Android 系统 中 使 用 工具 栏 的 过 程 。 


实例 文件 gongju.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
*head» 
«meta charset-"utf-8"» 
«title» Toolbar example with icons«/title» 
«meta name-"viewport" content-"width-device-width, initial-scale-1"» 
«link rel="stylesheet" href"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«style» 
/* wrap the text for the movie review */ 
-ui-li-desc { white-space: normal; margin-right: 20px; ) 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role="page"> 
<div data-role="header"> 
<h1> 电 影评 论 </h1> 
</div> 


«div data-role="content > 
«ul data-role-"listview" data-inset-"true" data-theme="e"> 
«li data-role-"list-divider"» X-&X $F 
«p class="ui-lraside"> 评 级 : «em»1,588«/em»«/p» «/li» 
<li> 
<img src-"images/thumbs-up.png" class-"ui-li-icon" 
<p> 去 看 看 它 ! 这 部 电影 是 好 演员 和 特殊 效果 是 难以 置信 的 。 值 得 的 门票 价格 。</p> 
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«lli» 
<lul> 


<ul data-role="listview" data-inset-"true" data-theme="e"> 
<li data-role="list-divider"> 评 论 </li> 
<li> 
<img src="images/111-user.png" class="ui-li-icon"> 
<p> 感 谢 评论 ， 这 周末 我 就 去 看 。</p> 
«span class="ui-l-count">1 天 前 </span> 
«li» 
«li» 
«img src-"images/111-user.png" class-"ui-li-icon" 
<p> 你 的 评论 非常 有 用 ! </p> 
«span class-"ui-li-count"»3 天 前 </span> 
«lli» 
«Iul» 
</div> 


<l- toolbar with icons --> 
«div data-role-"footer" data-position-"fixed" 
<div data-role-"navbar" 
«ul» 

<li><a href="#" data-icon-"arrow-I"» «/a» «/li» 
<li><a href="#" data-icon-"back"» «/a» «/li» 
<li><a href="#" data-icon-"star"»«/a» «/li» 
<li><a href="#" data-icon-"plus"» «/a» «/li» 
<li><a href="#" data-icon-"arrow-r"» «/a» «/li» 


«Jul» 
</div> 
</div> 
</div> 
</body> 
</html> 


上 述 实例 执行 后 的 效果 如 图 16-11 所 示 。 


< BJ " * > 


图 16-11 执行 效果 
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在 上 述 执行 效果 中 有 一 个 显示 电影 评论 的 屏幕 ， 为 了 帮助 用 户 管理 评论 ， 可 以 利用 一 个 由 标准 图 
标 构 成 的 工具 栏 ， 此 工具 栏 允许 用 户 执行 如 下 所 示 的 5 种 动作 。 

回 导航 到 前 面 的 评论 。 

回 回复 评论 。 

回 ”将 评论 标记 为 最 喜欢 的 评论 。 

a ”添加 一 条 新 的 电影 评论 。 

回 “导航 到 后 面 的 评论 。 

在 创建 工具 栏 时 ， 仅 需要 最 少 的 标记 。 在 含有 属性 data-role= "avbF" 的 <div> 中 ， 只 需要 其 中 包含 
按钮 的 一 个 无 序列 表 即 可 。 工 具 栏 按钮 相当 灵活 ， 而 且 可 以 根据 设备 的 宽度 进行 等 间距 排放 。 


16.3.2” 带 有 分 段 控件 的 工具 栏 


在 jQuery Mobile 应 用 中 ， 可 以 在 工具 栏 中 放置 一 个 分 段 控件 ， 从 而 让 用 户 通过 不 同 的 视角 来 访问 
应 用 程序 的 数据 。 例 如 在 工具 栏 中 放置 分 段 控件 ， 可 以 允许 用 户 显示 日 历数 据 的 不 同 视图 。 此 处 的 分 
段 控件 ， 与 实例 16-4 中 使 用 的 分 段 控 件 相 同 。 这 说 明 可 以 同时 在 页 眉 和 工具 栏 组 件 中 使 用 分 段 控件 。 
分 段 控件 只 是 一 组 包含 在 一 个 控件 组 内 并 按照 用 户 的 要 求 进行 风格 化 的 按钮 。 

下 面 通 过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 工具 栏 中 使 用 分 段 控件 的 方法 。 


实例 文件 segmented.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>Footer with Segmented Control Example</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
.segmented-control ( text-align:center;) 
.segmented-control .ui-controlgroup ( margin: 0.2em; ) 
-ui-control-active, .ui-control-inactive { border-style: solid; border-color: gray; ) 
.ui-control-active ( background: #BBB; } 
-ui-control-inactive ( background: #DDD; ) 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 
«div data-role="page"> 
«div data-role="header > 
<h1> 日 历 记事 本 </h1> 
</div> 
«div data-role="content"> 
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«ul data-role-"listview" data-filter-"true" 
«li data-role-"list-divider"»Mon «p class-"ui-li-aside"» «strong» Feb 6 2012«/strong» «/p» «/li» 
<li><a href="#"><p><strong>6</strong> PM«span class-"ui-li-aside"»«strong»^: FR 2 «/strong» 
«[span» «/p» «/a» «lli» 
<li data-role-"list-divider"» Wed «p class-"ui-li-aside"» «strong»Feb 8 2012«/strong» «/p» «/li» 
<li><a href="#"><p><strong>6</strong> PM«span class-"ui-i-aside"» «strong» 7:8] iX «/strong» 
«[span? «/p» «/a» «lli» 
<li data-role-"list-divider"»Fri «p class-"ui-li-aside"»«strong»Feb 10 2012«/strong» «/p» «/li» 
<li><a href="#"><p><strong>2</strong> PM«span class-"ui-li-aside"» «strong» 3 i& Tf </strong> 
</span></p></a></li> 
<li><a href="#"><p><strong>5</strong> PM<span class="ui-li-aside"><strong> 看 足球 !</strong> 
</span></p></a></li> 
«Iul» 
</div> 
<!-- Toolbar with a segmented control —> 
<div data-role="footer" data-position="fixed" data-theme="d" class="segmented-control"> 
<div data-role="controlgroup" data-type="horizontal"> 
«a href="#" data-role="button" class="ui-control-active"> 全 部 </a> 
«a href="#" data-role-"button" class="ui-control-inactive"> 日 期 </a> 
«a href="#" data-role-"button" class="ui-control-inactive"> 月 份 </a> 
</div> 
</div> 
</div> 
</body> 
</html> 


上 述 实例 执行 后 的 效果 如 图 16-12 所 示 。 
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图 16-12 执行 效果 
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GB 知识 点 讲解 : 光盘 \ 视 频 讲解 第 16 章 \ 标 签 栏 .avi 
在 jQuery Mobile 应 用 中 ， 可 以 将 页 脚 设计 为 一 个 标签 栏 。 通 过 标签 栏 可 以 以 不 同 的 视图 来 查看 应 
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用 程序 。 标 签 栏 通常 作为 一 个 永久 的 页 脚 出 现在 屏幕 的 底部 边缘 ， 用 户 可 以 在 应 用 程序 的 任何 位 置 访 
问 它 。 在 jQuery Mobile 应 用 中 ， 标 签 栏 通常 包含 显示 图 标 和 文本 的 按钮 。 在 日 常 应 用 中 ， 通 常 有 如 下 
4 种 样式 的 标签 栏 。 

在 标签 栏 中 包括 jQuery Mobile 内 可 用 的 标准 图 标 。 

永久 标签 栏 。 

标签 栏 使 用 自 定 义 图 标 。 

将 标签 栏 与 同一 个 UI 内 的 分 段 控件 结合 起 来 ， 从 而 允许 用 户 通过 同一 个 屏幕 导航 ， 以 不 同形 
式 查看 数据 。 

本 节 将 详细 讲解 上 述 4 种 标签 栏 的 基本 知识 和 具体 用 法 。 


16.4.1 ” 带 有 标准 图 标的 标签 栏 


在 移动 Web 设计 应 用 中 ,最 简单 的 标签 栏 解决 方案 使 用 的 是 jQuery Mobile 的 标准 图 标 集 。jQuery 
Mobile 拥有 自己 的 标准 图 标 ， 如 果 使 用 这 些 标准 图 标 ， 则 标签 栏 无 须 任何 额外 的 样式 风格 。 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 带 有 标准 图 标的 标签 栏 的 方法 。 
”实例 16-11: 使 用 带 有 标准 图 标的 标签 梯 。 
源码 路 径 : 光盘 :\codes\16\tabbar.html 


实例 文件 tabbar.html 的 具体 实现 代码 如 下 。 


<body> 
<div data-role="page"> 
«div data-role="header"> 
<h1> 精 彩 视频 </h1> 
</div> 


回回 加 加 


«div data-role="content"> 
<ul data-role-"listview"» 
<li> 
<a href="#"> 
«img src="images/111.jpg" /> 
<h3> 变 形 金 刚 </h3> 
<p> 评 级 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
«lli» 
<li> 
<a href="#"> 
«img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 级 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
</a> 
«li» 
<li> 
<a href="#"> 


e. 
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«img src-"images/3316.jpg" /> 
<h3> 雷 雨 </h3> 
<p> 评 级 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
</a> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/444 jpg" /> 
«h3»/ 2E X7] «/h3» 
<p> 评 级 : PG</p> 
<p> 时 长 : 95 min.</p> 
«la» 
«lli» 
«Jul» 
</div> 


<l- tab bar with standard icons --> 
«div data-role-"footer" data-position-"fixed" 
«div data-role-"navbar" 
<ul> 
<li><a href="#" data-icon="home"> £ 71 «/a» «/li» 
<li><a href="#" data-icon="star" class="ui-btn-active"> 电 影 </a></li> 
<li><a href="#" data-icon="grid"> 剧 场 </a></li> 


«Iul» 
</div> 
</div> 
</div> 
</body> 


上 述 实例 执行 后 的 效果 如 图 16-13 所 示 。 


\ X 战 警 

IN 评级 : PG-13 © 
时 长 : 137 min. 

Lt mu 

Wü: PG-13 © 
时 长 :131min 

A 


AEU 
评级 -PG © 
时 长 :95 min. 


图 16-13 执行 效果 
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16.4.2 永久 标签 栏 


在 jQuery Mobile 应 用 中 ,为 了 永久 显示 标签 栏 ， 需 要 为 页 脚 添加 一 个 额外 的 属性 。 为 了 在 页 面 转 
换 期 间 可 以 一 直 显 现 页 脚 , 可 以 为 每 个 标签 栏 的 页 脚 添 加 data-id 属性 , 并 将 其 值 设置 为 相同 的 识别 符 。 
具体 方法 是 设置 所 有 标签 栏 都 包含 一 个 data-id="main-tabbar" 识 别 符 。 例如 , 触摸 一 个 不 活动 的 标签 栏 ， 
而 且 在 页 面 切换 期 间 屏幕 将 会 “滑动 ”， 而 标签 栏 仍 然 保 持 为 固定 和 永久 显现 的 状态 。 此 外 ， 在 从 一 
个 标签 转换 到 另外 一 个 标签 时 ， 为 了 保持 每 一 个 标签 栏 的 活动 状态 ， 需 要 添加 ui-state-persist 和 ui-btn- 
active 类 。 例 如 ， 下 面 的 代码 演示 了 永久 标签 栏 的 用 法 ， 其 中 加 粗 倾斜 的 代码 实现 了 永久 设置 功能 。 


«div data-role-"footer" class-"tabbar" data-id-"main-tabbar" 
data-position-"fixed' 
<div data-role-"navbar" Class-"tabbar"» 
«ul» 
<li><a href-"tabbar-movies.html" 
classz"ui-btn-active ui-state-persist"»F8 «a» «lli» 
<li><a href-"tabbar-theatres.html"» & /& «/a» «/li» 
«Jul» 
</div> 
</diV> 
«div data-role-"footer" class-"tabbar" data-id="main-tabbar" 
data-position-"fixed"» 
<div data-role-"navbar" class-"tabbar"» 
«ul» 
<li><a href-"tabbar.movies.html"» t& & «/a» «/li» 
<li><a href-"tabbar.theatreS.html" 
classz"ui-btn-active ui-state-persist"> 音 乐 </a>< / li» 
«Jul» 
</div> 
</div> 


16.4.3 ”有 自 定义 图 标的 标签 栏 


在 移动 Web 设计 应 用 中 ， 可 以 在 标签 栏 或 工具 栏 中 添加 自 定义 的 图 标 。 通 过 使 用 jQuery Mobile, 
只 需 添 加 最 少 的 代码 ， 即 可 提供 对 自 定 义 图 标的 支持 。 例 如 在 下 面 的 演示 实例 中 ， 包 含 了 几 个 来 自 
Glyphish 的 第 三 方 图 标 。 


实例 16-12: 在 Android 中 使 用 有 自 定义 图 标的 标签 栏 
源码 路 径 光盘 :\codes\16\tabbar-icons.html 


实例 文件 tabbar-icons.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Tab Bar Example</title> 
«meta name="viewport" content-"width-device-width, initial-scale=1"> 
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«link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 

-ui-navbar-custom .ui-btn .ui-btn-inner { font-size: 11pxlimportant; padding-top: 24pxlimportant; padding- 
bottom: Opxlimportant; } 

.ui-navbar-custom .ui-btn .ui-icon ( width: 30pxlimportant; height: 20pxlimportant; margin-left: 
-15pxlimportant; box-shadow: nonelimportant; -moz-box-shadow: nonelimportant; -webkit-box-shadow: 
nonelimportant; -webkit-border-radius: none important; border-radius: none limportant; ) 

#home .ui-icon ( background: url(images/516-house-w.png) 5096 50% no-repeat; background-size: 
22px 20px; } 

#movies .ui-icon ( background: url(images/107-widescreen-w.png) 50% 50% no-repeat; background- 
size: 25px 17pX; } 

#theatres .ui-icon ( background: url(images/15-tags-w.png) 50% 50% no-repeat; background-size: 
20px 20px; } 

</style> 

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 

<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role-"page" 
«div data-role-"header"» 
<h1> 精 彩电 影 </h1> 
</div> 


<div data-role="content"> 
<ul data-role-"listview"» 
<li> 
<a href="#"> 
<img src-"images/111.jpg" /> 
<h3> 变 形 金 刚 </h3> 
<p> 评 级 : PG</p> 
<p> 时 长 : 95 min.«/p» 
<la> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 级 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
</a> 
«lli» 
<li> 
<a href="#"> 
<img src="images/3316.jpg" /> 
<h3> 雷 雨 </h3> 
<p> 评 级 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
</a> 
«lli» 
«li» 
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<a href="#"> 
«img src-"images/444 jpg" /> 

<h3> 小 李 飞 刀 </h3> 
<p> 评 级 : PG</p> 
<p> 时 长 : 95 min.</p> 

<la> 

«lli» 
«Iul» 
</div> 


«I— tab bar with custom icons —> 
<div data-role-"footer" class-"ui-navbar-custom" data-position-"fixed"- 
«div data-role-"navbar" class-"ui-navbar-custom"» 
«ul» 
<li><a href="#" id-"home" data-icon-"custom"» £ 71 </a></li> 
<li><a href="#" id="movies" data-icon="custom" class="ui-btn-active"> 电 影 </a></li> 
<li><a href="#" id="theatres" data-icon="custom"> 音 乐 </a></li> 


«Iul» 
</div> 
</div> 
</div> 
</body> 
</html> 


在 上 述 实例 中 ， 为 了 添加 自 定义 图 标 ， 需 要 添加 属性 data-icon="custom"， 以 及 用 于 定位 的 一 些 自 定 
义 样式 和 id。 其 中 ，id 用 于 将 每 个 按钮 与 它 的 样式 进行 关联 。 上 述 实例 执行 后 的 效果 如 图 16-14 所 示 。 


变形 金刚 
HH PG © 
对 长 :95 mir. 
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gH 137 mn. 
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DE 
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时 长 : 95 min. 
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图 16-14 执行 效果 
16.4.4” 带 有 分 段 控件 的 标签 栏 


在 移动 Web 设计 应 用 中 ， 可 以 使 用 永久 标签 栏 来 完善 站 点 导航 ， 而 且 可 以 使 用 分 段 控 件 来 显示 数 
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据 的 不 同 视 图 。 例如， 在 下 面 的 演示 实例 中 创建 了 一 个 UI， 该 UI 允许 用 户 在 “主页 ”、“ 电 影 ” 和 
“音乐 ”标签 之 间 进 行 导航 。 

€ - 实例 16-13: 在 Android HERRA A EHER 。 
源码 路 径 : 光盘 :\codes\l16\tabbar-segmented .html 


实例 文件 tabbar-segmented.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>Tab Bar Example</title> 
«meta name-"viewport" content-"width-device-width, initial-scale=1"> 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1 .O/jquery.mobile-1.0.min.css" /> 
«style» 

-tabbar .ui-btn .ui-btn-inner ( font-size: 11pxlimportant; padding-top: 24pxlimportant; padding-bottom: 
Opxlimportant; ) 

-tabbar .ui-btn .ui-icon ( width: 30pxlimportant; height: 20pxlimportant; margin-left: -15pxlimportant; 
box-shadow: nonelimportant; -moz-box-shadow: nonelimportant; -webkit-box-shadow: nonelimportant; -webkit- 
border-radius: none important; border-radius: none important; ) 

#home .ui-icon ( background: url(images/516-house-w.png) 50% 5096 no-repeat; background-size: 
22px 20px; ) 

#movies .ui-icon ( background:  url(images/107-widescreen-w.png) 5096 5096 no-repeat; background-size: 
25px 17px; ) 

sitheatres .ui-icon ( background: url(images/15-tags-w.png) 5096 5096 no-repeat; background-size: 
20px 20px; ) 


.segmented-control { text-align:center;) 
.segmented-control .ui-controlgroup ( margin: 0.2em; ) 
.ui-control-active, .ui-control-inactive ( border-style: solid; border-color: gray; ) 
.ui-control-active ( background: 4BBB; ) 
.ui-control-inactive ( background: #DDD; } 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role="page"> 
<div data-role="header" data-theme="b" data-position="fixed"> 
<div class="segmented-control ui-bar-d"> 
«div data-role-"controlgroup" data-type="horizontal"> 
«a href="#" data-role-"button" class-"ui-control-active"» AAA 模式 </a> 
«a href="#" data-role-"button" class-"ui-control-inactive"»BBB 模式 </a> 
«a href="#" data-role-"button" class-"ui-control-inactive"» CCC 模式 </a> 
</div> 
</div> 
</div> 
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<div data-role="content"> 
«ul data-role-"listview" 
«li» 
«a href="#"> 
«img src-"images/111.jpg" /> 
<h3> 变 形 金刚 </h3> 
<p>Rated: PG</p> 
<p>Runtime: 95 min.</p> 
«Ja» 
«lli» 
«Ji» 
«a href="#"> 
«img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p>Rated: PG-13</p> 
<p>Runtime: 137 min.</p> 
<la> 
«lli» 
<li> 
<a href="#"> 
<img src="images/3316.jpg" /> 
<h3> 雷 雨 </h3> 
<p>Rated: PG-13</p> 
<p>Runtime: 131 min.</p> 
<la> 
«lli» 
<li> 
<a href="#"> 
<img src-"images/444 jpg" /> 
<h3> 小 李 飞 刀 </h3> 
<p>Rated: PG</p> 
<p>Runtime: 95 min.</p> 
<la> 
<Ni> 
<li> 
<a href="#"> 
<img src="images/111.jpg" /> 
<h3> 变 形 金 刚 (3D 版 ) </h3> 
<p>Rated: PG-13</p> 
<p>Runtime: 131 min.</p> 
</a> 
«Ili» 
<lul> 
</div> 


<l- tab bar with custom icons —> 
«div data-role-"footer" class-"tabbar" data-position-"fixed" 
<div data-role-"navbar" class-"tabbar"^ 
<ul> 
<li><a href="#" id="home" data-icon="custom"> 3: y «/a» «/li» 
<li><a href="#" id="movies" data-icon-"custom" class="ui-btn-active"> 电 影 </a></li> 
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<li><a href="#" id="theatres" data-icon-"custom"» §# /& «/a» «/li- 
«Jul» 
</div> 
</div> 
</div> 


</body> 
</html> 
在 上 述 实例 代码 中 ， 当 用 户 选择 “电影 ”标签 时 ， 会 在 页 眉 内 显示 分 段 控件 ， 以 允许 用 户 筛选 他 
们 的 电影 列表 。 在 本 实例 中 已 经 彻底 移 除了 页 眉 文 本 ， 原 因 是 活动 标签 已 经 用 来 突出 显示 页 面 的 标题 。 
上 述 实例 执行 后 的 效果 如 图 16-15 所 示 。 


AAMAS? | B68 模式 | CCC 模 式 
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T 3 AJ 
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按钮 是 移动 Web 程序 中 最 常 使 用 的 控件 之 一 ， 能 够 为 用 户 提供 非常 高 效 的 用 户 体验 。 在 本 书 前 面 
的 许多 实例 中 已 经 多 次 使 用 到 了 按钮 。 本 章 将 详细 讲解 在 jQuery Mobile 中 实现 按钮 功能 的 基本 知识 
为 读者 学 习 本 书后 面 的 知识 打下 基础 。 


17.1 链接 按钮 


Gu 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 17 章 \ 链 接 按钮 .avi 

在 jQuery Mobile 中 有 多 种 形式 的 按钮 ， 其 中 最 为 常见 的 有 链接 按钮 、 表 单 按钮 、 图 像 按 钮 、 只 带 
有 图 标的 按钮 以 及 同时 带 有 文本 和 图 标的 按钮 。 在 现实 应 用 中 ，jQuery Mobile 按钮 都 具有 一 致 的 样式 
风格 。 无 论 使 用 链接 按钮 还 是 基于 表单 的 按钮 ，jQuery Mobile 框架 都 会 以 完全 相同 的 方式 对 待 它们 。 
在 讲解 这 些 按钮 时 ， 会 讲解 一 些 常见 的 实用 案例 ， 以 便于 读者 学 习 和 理解 。 

在 jQuery Mobile 应 用 中 , 链接 按钮 是 最 常 使 用 的 按钮 类 型 。 当 需要 将 一 个 普通 链接 设计 为 按钮 时 ， 
需要 为 链接 添加 如 下 所 示 的 属性 。 

data-role-"button" 


在 默认 情况 下 ， 页 面 中 内 容 区 域内 的 按钮 都 被 设计 为 块 级 元 素 ， 这 样 可 以 填充 其 外 层 容 器 《〈 即 内 
容 区 域 ) 的 整个 宽度 。 如 果 需 要 的 是 一 个 更 为 紧凑 的 按钮 ， 其 宽度 与 按钮 内 部 的 文本 和 图 标的 宽度 相 
同 ， 则 可 以 添加 如 下 所 示 的 属性 。 


data-inline-"true" 


实例 文件 link.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 按 钮 </title> 
«meta name="Viewport" content-"width-device-width, minimum-scale=1.0, maximum-scale=1.0;"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/iquery.mobile-1.0.min.css" /> 
«script src="http://code.jquery.com/jquery-1.6.17.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
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<body> 


«div data-role-"page" data-theme="b"> 
«div data-role-"header"^ 
<h1> 演 示 按 钮 的 用 法 </h1> 
</div> 


<div data-role="content"> 
<p style-"text-align:center;"» 
<em>&lt:a href="#" <strong>data-role="button"</strong>&gt; 链 接 按 钮 


&lt;/a&gt;</em> 链 接 按 钮 <a href="#" data-role="button"></a> 
<br><br> 


«em»&lt;a href="#" data-role="button" <strong>data-inline="true"</strong>&gt; 同 意 &lt;/a&gt; 
«a href="#" data-role="button" data-inline-"true" data-rel-"back" data-theme="a"> 不 同意 </a> 
«a href="#" data-role="button" data-inline-"true" data-theme="c"> 同 意 </a> 
«Ip» 
</div> 
</div> 


</body> 
</html> 


在 上 述 实例 代码 中 ， 如 果 希 望 按钮 并 排放 置 ， 并 占据 屏幕 的 整个 宽度 ， 可 以 使 用 一 个 两 列 的 网 格 。 
执行 后 的 效果 如 图 17-1 所 示 。 


广 示 技 钮 的 用 注 


«a hre 挛 党 "dalo-rolen "buUrton"> 1 & E ET-/a- ETE. 
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172 表单 按钮 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 17 章 \ 表 单 按钮 .avi 

在 jQuery Mobile 应 用 中 , 基于 表单 的 按钮 比较 容易 设计 。 为 了 简单 起 见 , 框架 会 自动 将 任何 button 
或 input 元 素 转换 为 移动 类 型 的 按钮 。 如 果 想 要 禁用 表单 按钮 或 任何 其 他 控件 的 自动 初始 化 ， 可 以 为 这 
些 元 素 添加 如 下 所 示 的 设置 。 

data-role-"none" 

这 样 ，jQuery Mobile 就 不 会 增强 这 些 控件 。 

«button data-role="none"> 表 单 按钮 </button> 
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下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 表单 按钮 的 方法 。 


实例 文件 form.html 的 具体 实现 代码 如 下 。 


<div data-role="page"> 
«div data-role="header"> 
<h1> 使 用 表单 按钮 </h1> 
</div> 


<div data-role="content"> 
<em>&lt;button&gt; 按 钮 元 素 &lt;/button&gt;</em> 
<button data-theme="b"> 按 钮 元 素 </button> 
<br> 
«em»&lt;input type="button" value="Button input" /&gt;</em><br> 
<em>&lt;input type="submit" value="Submit input" /&gt;</em><br> 
<em>&lt;input type-"reset" value="Reset input" /&gt;</em> 
«input type="button" value= "确定 按钮 " data-theme="b" /> 


</div> 
</div> 
执行 后 的 效果 如 图 17-2 所 示 。 
使 用 表单 按钮 
«button» $3 7c Æ<button> 


«input type="button" value-"Button input" /> 
«input type="submit" value-"Submit input" /> 
«input type-"reset" value-"Reset input" /» 


确定 按钮 


图 17-2 执行 效果 
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在 jQuery Mobile 应 用 中 ， 可 以 很 容易 地 将 图 像 设计 为 按钮 。 如 果 想 将 图 片 附加 到 一 个 input 元 素 
上 ， 则 需要 添加 如 下 所 示 的 属性 。 

data-role-"none" 


下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 图 像 按钮 的 方法 。 


e. 


实例 文件 image.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" data-theme="b"> 
<div data-role-"header"» 
<h1> 使 用 图 片 按钮 </h1> 
</div> 


<div data-role="content"> 
<p style="text-align:center;"> 
<em>&lt;input type-"image" src-"cloud.png" <strong>data-role="none"</strong> /></em><br> 
«input type-"image" src-"images/cloud-default.png" style="width:57px; height:57px;" data-role= 
"none" /> 
«Ip» 


<p style-"text-align:center;"» 
«em»ált;a href-"z"&gt;&ltiimg src-"cloud.png"&gt;&It;/a&gt;«/em» «br» 
«a href="#"><img src-"images/cloud-default.png" height-"44" width="44"></a> 
«Ip» 
</div> 
</div> 


执行 后 的 效果 如 图 17-3 所 示 。 


使 用 图 片 按钮 
«input (ype-"image" src-"cloud png" data-roles"none" /> 


Cg 


x 


<a href="#"><img src-"cloud png"></a> 
E 


图 17-3 执行 效果 
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在 移动 Web 开发 应 用 中 ,包含 了 一 组 经 常 在 移动 应 用 程序 中 使 用 的 标准 图 标 ， 其 中 包含 一 个 单独 


的 白色 图 标 精灵 (sprite》， 而 且 该 图 标 后 面 还 有 一 个 半 透 明 的 黑 圈 ， 以 确保 图 标 能 够 与 任何 背景 色 区 
DFK. TE jQuery Mobile 应 用 中 ,通过 添加 属性 data-icon 并 指定 要 显示 的 图 标 方式 ， 可 以 将 图 标 添加 


到 任何 按钮 上 。 


在 jQuery Mobile 应 用 中 ， 属 性 data-icon 可 以 用 来 创建 如 下 所 示 的 图 标 。 
E] 左 箭 头 : data-icon-"arrow-l". 
E] Afk: data-icon-"arrow-r". 


| Android 移动 网 站 开发 详解 


上 箭头 : data-icon="arrow-u"。 
下 箭头 : data-icon="arrow-d"。 

删除 : data-icon-"delete". 

添加 : data-icon-"Plus". 

减少 : data-icon-"minus" 

检查 : data-icon="Check"。 

齿轮 : data-icon="gear"。 

前 进 : data-icon="Forward"。 

后 退 : data-icon-"Back". 

网 格 : data-icon-"Grid". 

五 角 : data-icon="Star"。 

警告 : data-icon="Alert"。 

信息 : data-icon-"info". 

首页 : data-icon="home"。 

搜索 : data-icon-"Search". 

在 默认 情况 下 ， 所 有 按钮 图 标 都 出 现在 按钮 文本 的 左 侧 ， 也 可 以 通过 data-iconpos-"top" / "bottom" 


ARRARARARARRAARARARA 
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下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 有 图 标的 按钮 的 方法 。 


实例 17-4: 在 Android 中 使 用 有 图 标的 按钮 
源码 路 径 : 光盘 :\codes\17\iconl.html 


实例 文件 icon1.html 的 具体 实现 代码 如 下 。 


«div data-role="page"> 
«div data-role-"header"- 
<h1> 使 用 有 图 标的 按钮 </h1> 
</div> 


«div data-role="content"> 
<p style-"text-align:center;"» 
«em»&lIt;input type="button" value-"delete" «strong»data-icon-"delete"«/strong»/&gt; «/em» 
«input type="button" value=" 确 认 按钮 " data-icon-"delete" data-theme-"b" data-inline-"true" /> 
</p> 
<p style="text-align:center;"> 
«em»&lt;a href="#" data-role="button" «strong»data-icon-"plus"«/strong» &gt; $&3&&It;/a&gt; «/em» 
«a href="#" data-role-"button" data-icon-"plus" data-theme-"b" data-inline="true"> 链 接 按钮 </a> 
«Ip» 
<p style-"text-align:center;"» 
«em»&lt;button «strong»data-icon-"minus"«/strong» &gt;3&$8 7c s &It;/button&gt; «/em» 
«button data-icon-"minus" data-theme-"b" data-inline-"true"»12$8 zc & «/button» 
«Ip» 
</div> 
</div> 


执行 后 的 效果 如 图 17-4 所 示 。 


sue sa m 


«input type="button" value-"delete" data-icon-"delete"/- 
EX 确认 按钮 
«a href-"&" data-role-"button" data-icons"plus"» & ££-/a» 


+ 链接 按钮 


«button data-icon-"minus"- Ż £c &-/button» 


图 17-4 执行 效果 
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GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 17 章 \ 使 用 只 带 有 图 标的 按钮 .avi 

在 jQuery Mobile 应 用 中 ， 由 于 只 带 有 图 标的 按钮 占据 的 屏幕 空间 相当 小 ， 因 此 通常 用 于 页 眉 、 工 
具 栏 和 标签 栏 中 。 在 实例 16-3 中 , 已 经 使 用 过 几 个 只 带 有 图 标的 按钮 。 要 创建 一 个 只 带 有 图 标的 按钮 ， 
可 以 为 该 按钮 添加 如 下 所 示 的 属性 。 


data-iconpos-"notext" 
下 面 通 过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 只 带 有 图 标的 按钮 的 方法 。 


EX | 实例 17-5: 在 Android 中 使 用 只 带 有 图 标的 按钮 
源码 路 径 : 光盘 :\codes\17\icon2.html 


实例 文件 icon2.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>Buttons</title> 
«meta name="viewport" content-"width-device-width, minimum-scale=1.0, maximum-scale=1.0"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
.Ui-content ( min-height:inherit; ) 
</style> 
«script src="http://code.jquery.com/jquery-1.6.17.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


<div data-role="page" data-theme="b"> 
<div data-role="header"> 


/( Android 移动 网 站 开发 详解 


<h1> 使 用 只 带 有 图 标的 按钮 </h1> 
</div> 


<div data-role-"content" data-theme="b"> 
<p style="text-align:center;"> 
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext">Plus</a> 
<a href="#" data-role="button" data-icon="minus" data-iconpos="notext">Minus</a> 
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a> 
«a href="#" data-role="button" data-icon-"arrow-r" data-iconpos="notext">Next</a> 
<a href="#" data-role-"button" data-icon-"arrow-l" data-iconpos="notext">Previous</a> 
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a> 
«a href="#" data-role="button" data-icon-"arrow-d" data-iconpos="notext">Down</a> 
<a href="#" data-role="button" data-icon="check" data-iconpos="notext">Check</a> 
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Gear</a> 
<a href="#" data-role="button" data-icon="refresh" data-iconpos="notext">Refresh</a> 
<a href="#" data-role="button" data-icon="forward" data-iconpos="notext">Forward</a> 
<a href="#" data-role="button" data-icon="back" data-iconpos="notext">Back</a> 
<a href="#" data-role="button" data-icon="grid" data-iconpos="notext">Grid</a> 
<a href="#" data-role="button" data-icon="star" data-iconpos="notext">Star</a> 
<a href="#" data-role="button" data-icon="alert" data-iconpos="notext">Alert</a> 
<a href="#" data-role="button" data-icon="info" data-iconpos="notext">Info</a> 
<a href="#" data-role="button" data-icon="home" data-iconpos="notext">Home</a> 
<button data-icon="search" data-iconpos="notext" data-theme="b">Search</button> 
«Ip» 
</div> 
</div> 


</body> 
</html> 


执行 后 的 效果 如 图 17-5 所 示 。 
在 上 述 执 行 效果 中 ， 白 色 图 标 后 面 的 半 透 明 黑 圈 可 以 确保 其 与 任何 背景 色 形成 对 比 ， 而 且 可 以 适 
用 于 jQuery Mobile 主题 系统 。 如 图 17-6 所 示 为 不 同 主题 样式 下 图 标 按钮 的 例子 。 


使 用 只 带 有 图 标 


© 

© 

© 

2 "A" 主 题 下 的 图 标 按钮 

© GE 

MY = 

x "B" 主 题 下 的 图 标 按钮 

© [OD ee es 
B "C "主题 下 的 图 标 按钮 

o 


o000000600060000000 
图 17-5 执行 效果 图 17-6 不 同 主题 样式 下 的 图 标 按钮 实例 


sue xg 0 00 
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在 jQuery Mobile 应 用 中 ， 默认 情况 下 图 标 是 左 对 齐 的 。 但是， 通过 为 按钮 添加 data-iconpos 属性 ， 
并 指明 需要 对 齐 的 位 置 ， 可 以 显 式 地 将 图 标 对 齐 在 任何 一 侧 。 例 如 ， 下 面 的 代码 就 实现 了 一 个 图 标 在 
右边 的 按钮 ， 效 果 如 图 17-7 所 示 。 


«a href="index.html" data-role="button" data-icon-"delete" data-iconpos="right">Delete</a> 


Delete o 


图 17-7 图 标 在 右边 的 按钮 

也 可 以 用 data-iconpos="top" 创 建 一 个 图 标 在 文本 上 方 的 按钮 ， 效 果 如 图 17-8 所 示 。 
也 可 以 用 data-iconpos="bottom" 创 建 一 个 图 标 在 文本 下 方 的 按钮 ， 效 果 如 图 17-9 所 示 。 
© 


Delete 
Delete o 
V-8 图标 在 文本 上 方 的 按钮 图 17-9 ”图标 在 文本 下 方 的 按钮 


通过 data-iconpos="notext" 可 以 创建 一 个 只 有 图 标的 按钮 。button 插件 会 在 屏幕 上 隐藏 文本 ， 但 是 
会 把 文本 作为 title 属性 screen readers 的 内 容 和 支持 小 提示 的 浏览 器 ， 即 下 面 的 代码 。 


«a href="index.html" data-role-"button" data-icon-"delete" data-iconpos="notext">Delete</a> 


实例 文件 positioning.html 的 具体 实现 代码 如 下 。 


«div data-role="page"> 
<div data-role="header"> 
<h1> 实 现 按钮 定位 </h1> 
</div> 


<div data-role="content" style="text-align:center; margin:0; padding:0;"> 
<p style="margin:0; padding:0;"> 
«a href="#" data-role="button" data-icon-"arrow-u" data-theme="b" data-inline-"true" data-iconpos= 
"top"> 上 </a> 
«Ip» 
<p style-"margin:0; padding:0;"> 
«a href="#" data-role="button" data-icon-"arrow-I" data-theme="b" data-inline="true"> Zr </a> 
«a href="#" data-role-"button" data-icon="arrow-r" data-theme="b" data-inline="true" data-iconpos= 


"right"> 右 </a> 
KI 


«Ip» 


E Android ED RISTER HERE 


<p style-"margin:0; padding:0;"> 


<a href="#" data-role="button" data-icon="arrow-d" data-theme="b" data-inline="true" data-iconpos= 


"bottom"> F </a> 
«Ip» 
</div> 
</div> 


执行 后 的 效果 如 图 17-10 所 示 。 
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177 自 定义 按钮 图 标 


Gua 知识 点 讲解 ; 光盘 \ 视 频 讲解 \ 第 17 章 \ 自 定义 按钮 图 标 .avi 
在 jQuery Mobile 按钮 应 用 中 ， 可 以 使 用 自 定义 图 标 ， 此 时 需要 指定 一 个 唯一 的 data-icon 值 ， 例 如 : 


data-icon-"myapp-email" 


jQuery Mobile 的 button 插件 会 生成 一 个 class 值 添加 上 去 ， 该 值 由 ui-icon 与 data-icon 的 值 组 合 而 


成 Cui-icon-myapp-email 


， 然 后 在 CSS 中 指定 这 个 类 的 背景 图 片 地 址 。 为 了 保持 视觉 效果 上 的 一 致 ， 


建议 使 用 png-8 格式 的 白色 8x18 的 透明 图 标 。 


在 jQuery Mobile 应 用 


中 ， 要 为 按钮 添加 自 定义 图 标 ， 需 要 采取 如 下 所 示 的 两 个 步 又 。 


(1) 为 链接 添加 data-icon 属性 。 该 属性 的 值 必须 能 够 唯一 地 标识 自 定义 图 标 。 例 如 ，data-icon= 


"my-custom-icon"。 


(2) 创建 一 个 css 类 属性 ， 用 于 设置 自 定义 图 像 的 背景 源 。 该 类 属性 的 名 字 必 须 被 命名 为 ".ui-icon- 
<data-icon-value>"。 例 如 , 如 果 data-icon 值 是 "my-custom-icon", 则 新 创建 的 CSS 类 属性 应 该 是 "ui-icon- 


my-custom-icon" « 


下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 实现 自 定义 按钮 图 标的 方法 。 


K | 实例 17-7: 在 Android 中 实现 自 定义 按钮 的 下 


源码 路 径 : 光盘 :\codes\17\custom html 


实例 文件 custom.html 


<IDOCTYPE html» 
<html> 


e. 


的 具体 实现 代码 如 下 。 
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<head> 

<meta charset="utf-8"> 

<title>Buttons</title> 

«meta name-'"viewport" content-"width-device-width, minimum-scale=1.0, maximum-scale=1.0"> 

<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 

<style> 
.Ui-icon-custom1 ( background: url(data:image/png;base64,i VBORwOKGgoAAAANSUhEUgAAABYAAAAWCAY 
AAADEtGw7AAAKRGIDQ1BJQOMgUHJvZmlsZQAAeAGdIndUFNcXx9/MbC-*0XZYiZem9twWKkLr1IISYKy-4CS. 
1nWZRewNOQFlIoqICFYKKGLAaCgSK6JYCAgW7AEJIKoMRhEVICZGHPX3Oyf5/U7eH3c*8333nnfn3vvOGQA 
OoASECYQ6GSAEC2UCKO9PdmxsUnMPG9AAZEgAM2AHCAuaL QKL90gK5AXZYzF3WSB8V8LAuD1LYBaAK5b 
BlQzmX/p/*9DkSsSSwCAWtEAOx4/MtyIcpZ* RKRTJ9EmZeSKWMYI2MxmiDKqjJO--8 Tmf/p8YKk8Z87KFPNRHI 
rOIIB2TCRfKG/OKfJSREJSL8gT8fJRvoKyfJcOWoPwGZXo2n5MLAIYiOyV8bjrK1ih TXNGRbJTnAKCgpH3FKV--x 
hF-*A5gkAO0e0RCxISScwjbkmTBtnZxYzgJ-fxZdlLMIBS3EyOmMdk52SLOMIIAHZGZIKUUJLVIOKW2dHG2dHRw 
tYSLf/n9Y-*bn73*GWS9/eTxMuLPnkGMni/al9gVWk4tAKwptDZbvmgpOwFoWw-*A6tOvmv4- AOQLAWjt--tp7 G 
LJ5SZdlRC5WVvn54*ZYCPtdSVtDP6386fPb8e/jqPEvZeZ9rx/ Thp3KKWRKmrKjcnKwcqZiZK*Jw-*UyL/xTifx34V 
VpfSWEeyU/li/IC9KgYdMoEwjS03UKeQCLIETIFwr/rSLBM-*yoHGX6aaxRodR8BPCKSKPTRAfJrD8DQyABJSIP 
uQJ/7FKKMAbKbF6s99mnuUUb3/7T/YeAy9BXOFaQxZTI7MprJlYrzZlIzeCZnBAhnKQB3SgBrSAHjAGFSAWOA 
FXA4AIBQRAIA9EgHiWCXJAOSOEYSIPIYAOoAiVgC9gOqsFeUAcaQBM4BItTASXAOXARXWTVWE9WDQ2AUPA 
OT4DWYgSAID1EhGqQGaUMGKBIKC7Egd8gXCoEioXgoGUqDhJAUWg6tgOqgcqga2g81QN9DJ6Bz0GWoH7 
oDDUPjOO/QOxiBKTAd10QNYSuYBXvBwXAOvBBOgxfDS*FCeDNcBdfCR*BW-Bx8Fb4JD8HPACKEIGSEge 
ggFggLYSNhSAKSioiRIUgxUonUIKk11B9KNXEeGkAnkLQaHoWGYGAuMKy YAMXx/DxSzGrMSUYqoxhzCtmC7 
MdcwwZhLzEUvFamDNsC7YQGwcNg2bjy3CVmLrsS3Y C9ib2FHsaxwOx8AZ4ZxwAbh4XAZuGa4UtxvXjDuL6 
8eN4KbweLwa3gzvhg/DC/ASfBF *J/4l/gx* AD-KfOMgE7QJtgQ/QgJBSFhLqCQcJpwmDBDGCDNEBaIBOYUYR 
uQRIxDLiHXEDmlfcZQ4Q1lkGZHcSNGKkDNIaUhWpiXSBdJ/Okkwm65KdyRFKAXK1uYp8IHyJPEx*S1GimFLYI 
ESKILKZcpByInKH8pJKpRpSPakJVAl1M7WBep76kPpGjiZnKRcox5NbJVcj1yo3IPdcnihvIO8IvOh--qXyl/HH5Pv 
kJBaKCoQJbgaOwUqFG4YTCoMKUIKSRRjFMMVuxVPGwAmXF JOp4JUMIXyWeUqHSAaXzSiMOhKZHY9O4t 
HWOOtoF2igdRzeiB9Iz6CX07-Hi99EIIJWV75RjlAuUa5VPKQwyEY cglIZ GQxyhjHGLcY7 1Q0VbxU-*CqbVJpUBIS 
mVeeoeqryVYtVm1Vvqr5TY6rsqmWqbVVrU3ugjlE3VY9Qz1ffo35BfWIOfY 7rHO6c4jnH5tzVgDVMNSIImkcOOj 
RmNLUOVTXFGnu1DyvOaHFOPLUytCq0DqtNa5NO3bXFmhXaJ/RfspUZnoxs5hVzC7mpl6GToCOVGe/Tq/OjK 
6R7nzdtbrNug/OSHosvVS9Cr10OVvUI9bf1Q/eX6jfp3DYgGLINOgx0OG3QbThkaGsYYbDNsMnxipGgUaL TVqNLpv 
TDX2MF5sXGt8wwRnwjLJNNItcSOUNnUWTTetMeOzg80czQRmu836zbHmzuZC81rzQQuKhzdFnkWjxbAlwzL 
Ecq1lm* VzK32rBKutVt1 WH60drLOs66zv2SjZBNmstemw-*d3W1JZrW2N7w45q52e3yq7d70W9mT3ffo/9bQea 
Q6jDBodOhw*OTo5ixybHcSd9p2SnXU6DLDornFXKuuSMdfZ2XuV80vmti6OLxOWY y2*uFq6Zroddn8w1msuf 
Wzd3xE3XjeO2323lneme7L7PfchDx4PjUevxyFPPk*dZ7znmZeKV4XXE67m3tbfYu8V7mu3CXsE*64P44PsU 
*/[T6KvnO9632fein65fm1-g36e/gv8z/bAA2IDhga8BgoGYgN7AhcDLIKWhFUFcwJTgquDr4U YhpiDikIxQODQrd 
Fnp/nsE84by2MBAWGLYt7EGAUfj8B8jcBHhETURjyNtIpdHdkfRopKiDke9jvaOLou*N994vnR*Z4x8TGJMQ8x 
OrE9seexQnFXcirirBerxgvjJBBHxCTEJ9wtQC3wXbF4wmOiQWJd5aaLSwYOHIReqLshadSpJP4iQdT8Y mxy Yf T 
n7PCePUcqZSAIN2pUxy2dwd3Gc8T 14Fb5zvxi/njeWepZanPklzSSuWNp7ukV6ZPiFgC6oFLzICMvzmTGeGZR 
7MnM2KzWrOJmQnz58QKgkzhVO5WjkFOfOiM1GRaGixy-*LtiyfFweLeXCh3YW67hl7-* TPVljaXrpcN57nk1eW/y 
Y/KPFygWCAt6lpgu2bRkbKnfüm-*XYZZxlI3Uu11m*ZvnwCq8V--1dCK1NWdq7SW1W4anS1/*pDaOhrMItf8tNZ6 
bfnaV-ti3UUahauLhxZ77--*sUiuSFwOuMF 1w96NmI2Cjb2b7Dbt3PSxmFd8pcS6pLLkfSm39Mo3NI9UFTO7OX 
Vzb5lj2Z4tuC3CLbe2emw9VK5YvrR8ZFvottYKZkVxxavtSdsvV9pX7t1B2iHdMVQVUtW--U3/nlIp3vq9Orb9Z41z 
TvOtitadfübt7zugT2ee5r2au4t2ftun2Df713--- 1trDWsrD*-AO5B 14XBdT 1/0t69uGevX6kvoPB4UHhw5FHupqcGpo 
OkxxuKwRbpQ2jh9JPHLtO5/v2pssmvY 3M5pLjoKjOqNPv0/*/tax4 GOdx1nHm34w* GFXC62luBVqXdl62ZbeNt 
Qe395/IuhEZAdrR8uPIjBePKIzsuaU8qmy06T Thadnzyw9M3VWdHbiXNq5kcekznvn487felro6rOQfOHSRb-*L57u 
9us9ccrt0BrLLbRNXWFfarjpebe1x6Gn5yeGnII7 H3tY-*p772a87XOvrn9p8e8Bg4d93n*sUbgTeu3px3s//W/Fu3B 
xMHh272zbj*5k3Xnxd28uzP3VUH3i9-oPCg8qHGw9qr TX5uHnlcOjXsM9zzKOrRvRHuyLNfcn95P 1rámPg4ckx7r 
OGJ7ZOT437j154ueDreTPRsZqLoV8VfdzO3fv7 Db56/9UzGTY6-*EL-Y/b30pdrL.g6/sX3VOhUB89fJ39ema6-*13a 
mONvWW*-*738W-G5vJf49/X/XB5EPHX*CP92ezZ2f/AAOY8/xJsCmYAAAACXBIWXMAAAsTAAALEwEAmpw 
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YAAAAVEIEQVQA4Ee3TORGDIAwGY OKSB8zSaZzJaZwFFqFG/XNpDSal12ze948AYPrglodY6eJ5SypYYYwye/O 
CBgOQIE3opT3gPJrV5MntYcaoOltaZdwwlgcD6aC2/uWEGxO1pgwxHQehW-*QGGY *AI20C78DfACNXGGO9A 
TLoz9VIgA/jAmeXuuOayQc8bV60XIAmzwzcNKMqtnjFs5WpOR:-JInbcSECVzLtUg4pfSU79qYT4X28ZfYDXP17 
IL8vxQv/KFhUOBaQa4AAAAASUVORKSCY|II-) 5096 5096 no-repeat; background-size: 14px 14px; ) 

#custom2 .ui-icon ( background: url(../images/53-house-w.png) 5096 5096 no-repeat; background-size: 
14px 14px; ) 


/* Remove box shadow for custom image */ 
-ui-icon-shadow { 
-webkit-box-shadow: Opx Opx 0 rgba(255,255,255,.4); 
box-shadow: 0 Opx 0 rgba(255, 255, 255, 0.4); } 
</style> 
«script src="http://code.jquery.com/jquery-1.6.17.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


<div data-role="page" data-theme="b"> 
«div data-role="header"> 
<h1> 自 定义 图 标 </h1> 
</div> 


«div data-role-"content" style-"text-align:center;"» 

<p> 
<em>&lt;a href="#" data-role="button" <strong>data-icon="home"</strong>&gt;</em> 
<a href="#" data-role="button" data-icon="home" data-inline="true"> 标 准 图 标 </a> 

«Ip» 

<p> 
<em>&lt;a href="#" data-role="button" <strong>data-icon="custom1"</strong>&gt;</em><br> 
<a href="#" data-role="button" data-icon="custom1" data-inline="true"> 自 定义 图 标 </a> 

«Ip» 


<br> 
<p> 
<em>&lta href="#" data-role-"button" «strong»data-icon-"custom" id="custom2"</strong>&gt </em> 
<br> 
«a href="#" data-role-"button" data-icon-"custom" id="custom2" data-inline="true"> 自 定义 2</a> 
«Ip» 
</div> 
</div> 


</body> 

</html> 

执行 后 的 效果 如 图 17-11 所 示 。 

在 现实 应 用 中 ， 用 于 自 定义 图 像 的 背景 源 是 使 用 数据 URI 方 案 (scheme) 载 入 的 。 在 从 外 部 载 入 小 


图 像 时 ， 这 将 是 一 个 高 性 能 的 方法 。 例 如 ， 通 过 在 线 内 〈in-line) 包含 自 定 义 图 像 ， 就 不 再 需要 HTTP 
请 求 。 但 该 技术 的 主要 缺陷 是 ,图像 以 Base64 编码 并 形成 字符 串 后 , 其 尺寸 要 比 原始 的 图 像 大 三 分 之 一 。 


sue r8 0000 


«a href-"£" dafa-role-"button" data-icon-"home"-- 


* 标准 图 标 


«a href-"£" dafa-role-"button" data-icon-"custom1"-- 


f 自 定义 图 标 


a href-"&" data-role-"button" data-icon-"custom" 
id-"custom2"- 


图 17-11 执行 效果 
17.8 使 用 分 组 按钮 
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在 jQuery Mobile 应 用 中 ， 如 果 想 对 按钮 进行 分 组 ， 可 以 将 按钮 包含 在 一 个 控件 组 内 。 可 以 使 用 如 
下 所 示 的 属性 将 一 组 按钮 包装 在 容器 中 。 


data-role-"controlgroup" 


在 默认 情况 下 ， 框 架 会 对 按钮 进行 垂直 分 组 ， 移 除 所 有 的 页 边 空白 (margin) ， 并 在 按钮 之 间 添 
加 边界 。 此 外 ， 为 了 在 视觉 上 增强 分 组 ， 第 一 个 和 最 后 一 个 元 素 会 使 用 圆 角 进 行 设计 。 按 钮 在 默认 情 
况 下 是 垂直 摆 放 的 ， 可 以 添加 属性 data-type="horizontal" 来 水 平 摆 放 按钮 。 垂 直 摆 放 的 按钮 会 占据 其 外 
层 容器 的 整个 宽度 ， 而 水 平 摆 放 的 按钮 的 宽度 则 与 其 内 容 一 样 宽 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 分 组 按钮 的 方法 。 


实例 17-8: 在 Android 中 使 用 分 组 按钮 
源码 路 径 光盘 :\codes\17\fenzu.html 


实例 文件 fenzu.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
«title» Segmented Control Example</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
.segmented-control { text-align:center;} 
.segmented-control .ui-controlgroup { margin: 0.2em; } 
.ui-control-active, .ui-control-inactive { border-style: solid; border-color: gray; } 
.ui-control-active { background: #BBB; } 
-ui-control-inactive ( background: #DDD; } 
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</style> 

«script src="http://code.jquery.com/jquery-1.6.17.min.js"></script> 

«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role="page"> 
<div data-role-"header" data-position="fixed"> 
<h1> 精 彩 影视 </h1> 
<div class="segmented-control ui-bar-d"> 
«div data-role-"controlgroup" data-type="horizontal"> 
«a href="#" data-role-"button" class="ui-control-active"> 剧 院 模式 </a> 
«a href="#" data-role="button" class="ui-control-inactive"> 马 上 回来 </a> 
«a href="#" data-role="button" class="ui-control-inactive"> 最 受 欢迎 的 </a> 
</div> 
</div> 
</div> 


<div data-role="content"> 
<ul data-role-"listview"» 
<li> 
<a href="#"> 
«img src-"images/111.jpg" /> 
<h3> 变 形 金刚 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
<la> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/333 jpg" /> 
<h3> 雷 雨 </h3> 
<p> 评 论 PG-13</p> 
<p> 时 长 : 131 min.</p> 
</a> 
«lli» 
<li> 
<a href="#"> 
«img src-"images/4417 jpg" /> 
<h3> 小 李 飞 刀 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
«lli» 
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«Jul» 
</div> 
</div> 


</body> 
</html> 


本 实例 的 执行 效果 如 图 17-12 所 示 。 


mm 
评论 PG-13 
时 长: 131 min. 


图 17-12 执行 效果 
当 对 按钮 进行 水 平分 组 时 ， 若 控件 组 的 宽度 超出 了 屏幕 宽度 就 会 发 生 重合 现象 。 


17.9 ”使 用 主题 按钮 
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TE jQuery Mobile 应 用 中 ， 按 钮 与 所 有 其 他 的 jQuery Mobile 组 件 一 样 ， 都 会 继承 其 父 容器 的 主题 。 
当 需 要 使 用 不 同 颜色 来 设计 按钮 时 , 通过 添加 data-theme 属性 的 方式 可 以 为 按钮 应 用 任何 所 选择 的 主题 。 

例如 在 实例 15-7 中 ， 为 了 提升 按钮 的 可 用 性 ， 设 置 的 多 选项 操作 表 就 是 一 个 典型 的 使 用 主题 按钮 
的 过 程 ， 效 果 如 图 17-13 所 示 。 


将 视频 分 享 到 ? 
(| 良 微 博 (| 


ED 


我 的 微 信 


4 17-13 ”主题 按钮 效果 
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在 jQuery Mobile 应 用 中 ， 插 件 button (plugin) 是 一 个 能 自动 增强 本 地 按钮 的 组 件 ， 可 以 使 用 该 
插件 动态 创建 、 启 用 和 禁用 按钮 。 如 果 需 要 在 代码 中 动态 创建 按钮 ， 可 以 通过 如 下 两 个 方法 来 实现 。 

回 ”通过 标记 驱动 的 方法 动态 创建 按钮 。 

EDO ERRE button 插件 的 选项 。 

在 标记 驱动 的 方法 中 ， 可 以 为 新 按钮 创建 jQuery Mobile 标记 ， 将 其 添加 到 内 容 容 器 中 ， 然 后 再 进 
行 增强 处 理 。 本 节 将 详细 讲解 使 用 动态 按钮 的 基本 知识 。 


17.10.1 按钮 选项 


为 了 动态 增强 按钮 ， 在 jQuery Mobile 框架 中 使 用 的 button 插件 具有 如 下 所 示 的 选项 。 
1. corners boolean 


在 默认 情况 下 ， 按 钮 是 圆 角 的 ， 将 该 选项 设置 为 false 则 会 移 除 按钮 的 圆 角 。 该 选项 还 可 以 公开 作 
为 一 个 数据 属性 : data-corners="false"。 例 如 : 


$("#button1").button({corners:false)); 

2. icons string 

设置 按钮 的 图 标 ， 默 认为 null。 该 选项 还 可 以 公开 作为 一 个 数据 属性 ，data-icon="plus"。 例 如 : 
$("#button1").button({icon:"plus"}); 

3. iconpos string 


设置 图 标的 位 置 。 可 能 的 值 有 left. right. top. bottom 和 notext， 默 认为 left. notext 值 会 将 按钮 
显示 为 一 个 只 带 有 图 标 而 没有 文本 的 按钮 。 该 选项 还 可 以 公开 作为 一 个 数据 属性 : data-iconpos- 
"notext"。 例 如 : 


$("#button1").button({iconpos:"notext"}); 
4. iconshadow boolean 


当 该 选项 值 为 tue 时, 框架 会 为 图 标 添加 阴影 。 该 选项 还 可 以 公开 作为 一 个 数据 属性 : data-iconshadow= 
"false"。 例 如 : 


$(“#button1”).button({iconshadow:false}); 
5. initSelector 


这 是 一 个 CSS 选择 符 。 默 认 : "button, [type='button'], [type-'submit']. [type-'reset'], [type-'image']" o 
此 选项 用 来 定义 被 初始 化 为 表单 按钮 的 选择 符 〈 通 过 元 素 类 型 、 数 据 规 则 等 ) 。 要 改变 被 初始 化 


312 


dJuE M 


的 元 素 ， 需 要 给 mobileinit event 事件 绑 定 该 选项 。 例 如 : 


$( document ).bind( "mobileinit", function()( 
$.mobile.button.prototype.options.initSelector = ".myButtons"; 
» 


6. inline 


这 是 一 个 布尔 值 。 若 设 为 tue， 会 使 按钮 为 内 联 的 样式 ， 此 时 按钮 的 宽度 由 按钮 内 的 文字 来 决定 。 
默认 情况 下 ， 此 项 为 null (false) ， 所 以 按钮 的 宽度 会 被 撑 满 ， 不 管 里 面 有 多 少 文 字 。 可 以 使 用 的 值 是 
true 和 false。 此 选项 也 可 以 通过 data-inline="true" 的 属性 设置 。 例 如 : 


$('a').buttonMarkup({ inline: "true" }); 
7. shadow 


这 是 一 个 布尔 值 。 默 认为 tue， 表 示 按 钮 有 阴影 。 此 选项 也 可 以 通过 data-shadow="false" 的 属性 设 
置 。 例 如 : 


$('a').buttonMarkup({ shadow: "false" }); 


17.10.2 ”按钮 方法 


在 jQuery Mobile 应 用 中 ， 插 件 button 具有 如 下 所 示 的 方法 。 
1. enable 

表示 将 一 个 disabled 的 表单 按钮 启用 ， 例 如 : 
S$([type-'submit]).button('enable"); 

2. disable 

用 于 禁用 一 个 表单 按钮 ， 例 如 : 

S$([type-'submit] ).button('disable"); 


3. refresh 


用 于 更 新 一 个 表单 按钮 , 如果 通过 JS 更 新 了 一 个 表单 按钮 ,必须 再 通过 refresh 方法 更 新 其 视觉 样 
式 。 例 如 : 


S$([type-'submit] .button(refresh"); 
上 述 方法 只 适用 于 表单 中 的 按钮 ， 基 于 链接 的 按钮 没有 相关 联 的 方法 。 


17.10.3 ”按钮 事件 


在 jQuery Mobile 应 用 中 ，button 插件 支持 如 下 事件 。 


create triggered when a button is created 
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即 在 创建 一 个 自 定义 按钮 时 会 触发 该 事件 ， 而 不 创建 一 个 自 定 义 按钮 。 例 如 下 面 的 演示 代码 。 
$('«a href="#" id="button2">Button2</a>') 


insertAfter("£button") 

.button({ 

theme:'a', 

create:function(event)( 
console.log("Creating button... "); 
l 

» 


17.40.4 “动态 按钮 演练 


Fi 
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经 过 对 本 节 前 面 内 容 的 学 习 ， 我 们 已 经 了 解 了 在 jQuery Mobile 应 用 中 实现 动态 按钮 的 基本 知识 。 
而 通过 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 实现 动态 按钮 的 方法 。 


re 实例 17-9: 在 Android 中 创建 并 使 用 动态 按钮 
源码 路 径 : 光盘 :\codes\17\d-buttons.html 


实例 文件 d-buttons.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 


<head> 

<meta charset="utf-8"> 

<title>Buttons</title> 

«meta name-"viewport" content-"width-device-width, minimum-scale=1.0, maximum-scale=1.0;"> 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 

«script src-"http://code.jquery.com/jquery-1.6.17 .min.js"» «/script» 

«script src-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"» «/script" 


</head> 
<body> 


<div data-role="page" data-theme="b"> 


<div data-role="header"> 
<h1> 创 建 动态 按钮 </h1> 
</div> 


<div data-role="content"> 
«a href="#" data-role="button" id="create-button1"> 创 建 按钮 1</a> 
<a href="#" data-role="button" id="create-button2"> 创 建 按钮 2</a> 


<br><br> 

«a href="#" data-role-"button" id="create-multiple-buttons"> 创 建 多 个 按钮 </a> 

«a href="#" data-role="button" id="create-button5"> 创 建 按钮 5</a> 

«a href="#" data-role="button" id="create-button6"> 创 建 按钮 6</a> 

«a href="#" data-role="button" id="disable-button3" data-theme="d"> 禁 用 的 按钮 3</a> 

<a href="#" data-role="button" id="enable-button3" data-theme="d"> 可 用 的 按钮 3</a> 
</div> 


第 17 章 按钮 


«script type="text/javascript"> 
<!-- 使 用 标记 驱动 的 方法 来 创建 动态 按钮 -> 
$( "#create-button1" ).bind( "click", function() { 
$('«a href="http://jquerymobile.com" id-"button1" data-role="button" data-icon="star" data-inline= 
"true" data-theme="a">Button1</a>' ) 
-appendTo( ".ui-content" ) 
.button(); 


» 
<!-- 使 用 插件 驱动 的 方法 来 创建 动态 --> 
$( "#create-button2" ).bind( "click", function() { 
$('<a href="http://jquerymobile.com" id-"button2"»Button2«/a»' ) 
insertAfter( "#create-button2" ) 
.button(( 
corners: true, 
icon: "home", 
inline: true, 
shadow: true, 
theme: 'a', 
create: function(event) ( 
console.log( "Creating button..." ); 
for (prop in event) ( 
console.log(prop + '= ' + event[prop]); 
) 


» 
» 


$( "#create-button5" ).bind( "click", function() ( 
$('«input type="submit" id-"button5" value-"Button5" data-theme-"a" />' ) 
insertAfter( "#create-button5" ) 
.button(); 
» 


$( "#create-button6" ).bind( "click", function() ( 
$( "<input type="submit" id-"button6" value-"Buttone" /> ) 
insertAfter( "#create-button6" ) 
.button(( 
'icon': "home", 
"inline": true, 
‘shadow’: true, 
"theme": 'a' 
» 
» 


$( "#create-multiple-buttons" ).bind( "click", function() ( 
$( "<button id-"button3" data-theme-"a"» Button3«/button»" ).insertAfter( "screate-multiple-buttons" ); 
$( '«button id-"button4" data-theme-"a"»Button4 «/button*' ).LinsertAfter( "#button3" ); 
$.mobile.pageContainer.trigger( "create" ); 

» 

<!-- 创 建 按钮 ， 并 动态 禁用 /启动 它们 --> 

$( "#disable-button3" ).bind( "click", function() ( 
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$( "#button3" ).button( "disable" ); 
» 


$( "#enable-button3" ).bind( "click", function() ( 
$( "#button3" ) button( "enable" ); 


在 上 述 示例 代码 中 ，JavaScript 语句 是 整个 程序 的 核心 ， 这 段 JavaScript 语句 的 实现 流程 如 下 。 

(1) 使 用 标记 驱动 的 方法 来 创建 动态 按钮 。 

在 标记 驱动 的 方法 中 , 为 新 按钮 创建 jQuery Mobile 标记 , 将 其 添加 到 内 容 容 器 中 , 然后 再 进行 增强 。 

(2) 使 用 插件 驱动 的 方法 来 创建 动态 按钮 。 

对 于 插件 驱动 的 方法 而 言 ， 需 要 创建 一 个 本 地 链接 ， 将 按钮 插入 到 页 面 中 ， 然 后 应 用 按钮 增强 。 

(3) 创建 按钮 ， 并 动态 禁用 /启动 它们 。 

在 此 创建 多 个 表单 按钮 ， 但 是 不 再 为 每 个 按钮 分 别 调用 button 插件 ， 而 是 通过 一 次 触发 页 面容 器 
的 create 方法 ， 对 所 有 的 按钮 进行 增强 。 另 外 ， 也 可 以 使 用 button 插件 的 enable 和 disable 方法 动态 启 
用 或 禁用 按钮 。 

本 实例 执行 后 的 初始 效果 如 图 17-14 所 示 。 

单 击 图 17-14 中 的 某 个 按钮 后 ， 会 动态 创建 对 应 的 按钮 。 例 如 单 击 “ 创 建 多 个 按钮 ”后 ， 会 在 下 
方 自动 创建 两 个 按钮 : “按钮 3” 和 “按钮 4”， 如 图 17-15 所 示 。 


创建 动态 按钮 


fulta c 
4 


创建 按钮 1 

创建 按钮 2 

创建 按钮 6 

* 3 
| MER 禁用 的 按钮 3 j 
h 
可 用 的 按钮 3 ( TARAS ) 
上 


17-14 ”初始 执行 效果 1715 动态 自动 创建 两 个 按钮 
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在 Web 应 用 中 ， 表 单 的 主要 作用 是 实现 数据 采集 功能 。 通 常 ， 一 个 表单 由 如 下 3 个 基本 组 成 部 分 
构成 。 

ED RERE: 包含 处 理 表单 数据 所 用 CGI 程序 的 URL 以 及 数据 提交 到 服务 器 的 方法 。 

回 ”表单 域 : 包含 文本 框 、 密 码 框 、 隐 藏 域 、 多 行文 本 框 、 复 选 框 、 单 选 按钮 、 下 拉 选 择 框 和 文 
件 上 传 框 等 。 

ED ”表单 按钮 : 包括 提交 按钮 、 复 位 按钮 和 一 般 按 钮 ， 用 于 将 数据 传送 到 服务 器 上 的 CGI 脚本 或 
者 取消 输入 ， 还 可 以 用 表单 按钮 来 控制 其 他 定义 了 处 理 脚本 的 处 理工 作 。 

本 章 将 详细 讲解 在 jQuery Mobile 中 实现 表单 功能 的 基本 知识 ， 为 读者 学 习 本 书后 面 的 知识 打下 基础 。 


18.1 表单 基础 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 18 章 \ 表 单 基础 .avi 

在 jQuery Mobile 应 用 中 ， 用 于 构建 基于 表单 的 应 用 程序 所 采用 的 方法 ， 和 传统 使 用 的 构建 Web 
表单 的 方法 非常 相似 。 虽 然 为 了 清晰 起 见 ， 应 该 指明 action 和 method 属性 ， 但 这 并 不 是 必需 的 。 在 默 
认 情 况 下 ，action 属性 会 默认 为 当前 页 面 的 相对 路 径 ， 该 路 径 可 以 通过 $.mobile.path.get0 找 到 ， 而 未 指 
定 的 method 属性 默认 为 get。 

在 提交 表单 时 ， 通 过 默认 的 “滑动 ”转换 ， 当 前 页 面 将 会 转换 到 后 续 页 面 。 但 是 通过 之 前 用 来 管 
理 链接 的 属性 可 以 配置 表单 的 转换 行为 。 

下 面 将 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 表单 的 方法 。 


实例 18-1: 在 Android 中 使 用 表单 
源码 路 径 : 光盘 :\codes\18\form html 


实例 文件 form.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8"> 
<title> Forms«/title» 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
label { 
float: left; 
width: 5em; 
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} 


input.ui-input-text { 
display: inline limportant; 
width: 12em limportant; 
ji 


formp( 
clear: left; 
margin: 1px; 
X 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 
«div data-role-"page" data-theme="b"> 
«div data-role-"header"» 
<h1> 提 交 表 单 信息 </h1> 
</div> 
«div data-role="content"> 
«form name="test" id-"test" action="form-response.php" method="post" data-transition="pop"> 
<p> 
<label for="email"> 邮 箱 :</label> 
«input type-"email" name-"email" id-"email" value-"" placeholder-"Email" data- 
theme="d"/> 
«Ip» 
«p» 
«button type="submit" data-theme-"a" name="submit"> 提 交 </button> 
«Ip» 
</form> 
</div> 
</div> 
</body> 
</html> 


在 上 述 实 例 代 码 中 ， 使 用 <form> 标 记 简单 实现 了 一 个 表单 效果 。 执 行 后 的 效果 如 图 18-1 所 示 。 
邮箱 aaaa@123.com 
提交 
18-1 执行 效果 
可 以 继续 在 表单 元 素 中 添加 如 下 所 示 的 属性 ， 以 管理 转换 或 禁用 Ajax。 
data-transition-"pop" 


data-direction-"reverse" 
data-ajax-"false" 


Eie ae 000 


在 整个 站 点 中 ， 需 要 确保 每 一 个 表单 的 id 属性 都 是 唯一 的 。 在 进行 表单 转换 时 ，jQuery Mobile 会 
同时 将 from 页 面 和 to 页 面 载 入 到 DOM 中 ， 以 完成 平滑 的 转换 。 为 了 避免 任何 冲突 ， 所 以 要 确保 表单 
的 id 必须 唯一 。 


18.2 在 表单 中 输入 文本 


Ge 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 18 章 \ 在 表单 中 输入 文本 .avi 
在 jQuery Mobile 应 用 中 ， 移 动 设备 上 的 文本 输入 工作 是 很 麻烦 的 。 当 在 物理 或 真实 的 QWERTY 
键盘 上 输入 文字 时 ， 效 率 会 很 低 。 所 以 在 移动 设备 中 ， 需 要 尽 可 能 自动 收集 用 户 的 信息 。 从 开发 人 员 
的 角度 来 看 ， 目 标 是 无 须 添加 任何 标记 就 可 以 创建 jQuery Mobile 表单 和 文本 输入 。 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 实现 在 表单 输入 文本 的 方法 。 
实例 18-2: 实现 在 表单 给 和 文本 
源码 路 径 : 光盘 :\codes\18\text.html 


实例 文件 texthtml 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>Forms</title> 
«meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 


<style> 
label ( 
float: left; 
width: 5em; 
H 
input.ui-input-text ( 


display: inline 'important; 
width: 12em important; 
} 
formp( 
Clear:left; 
margin:1px; 
) 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


<div data-role="page" data-theme="b"> 
<div data-role="header"> 
<h1> 输 入 文本 </h1> 


题 ， 
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</div> 


<div data-role="content"> 
<form id="test" id="test" action="#" method="post"> 
<p style="margin-bottom:8px;"> 
<label for="search" class="ui-hidden-accessible">Search</label> 
<input type-"search" name-"search" id="search" value="" placeholder-"Search" data-theme-"d" /> 

«Ip» 

> 

<label for="text"> 名 字 :</label> 

«input type="text" name="text" id-"text" value="" placeholder-"Text" data-theme="d"/> 

«Ip» 
pe 
<label for="number"> 编 号 :</label> 

<input type-"number" name-"number" id-"number" value="" placeholder-"Number" data-theme="d" /> 
«Ip» 
Ps 

«label for="email"> 邮 箱 :</label> 

<input type="email" name-"email" id="email" value="" placeholder-"Email" data-theme="d" /> 
«Ip» 
< 

<label for="url"> 网 址 :</label> 

«input type-"url" name="url" id-"url" value=” placeholder-"URL" data-theme-"d" /> 
</p> 
< 

<label for="tel"> 电 话 :</label> 

«input type-"tel" name-"tel" id-"tel" value="" placeholder-"Telephone" data-theme-"d" /> 
«Ip» 


«I-- Future: http://www.w3.org/2011/02/mobile-web-app-state.html --> 
dE 
<p> 
<label for="date">date:</label> 
<input type="date" name="date" id="date" value-"" placeholder="Date" data-theme="d" /> 
<p> 
一 > 


<p> 
«label for="textarea"> 留 言 :</label> 
<textarea cols="40" rows="8" name-"textarea" id="textarea" placeholder-"Textarea" data-theme= 
"d"></textarea> 
«Ip» 
</form> 
</div> 
</div> 


</body> 
</html> 
在 上 述 实 例 代码 中 ， 通 过 为 输入 元 素 添加 属性 data-theme 的 方法 ， 为 文本 输入 选择 一 个 合适 的 主 
从 而 增强 表单 字段 的 对 比 。 执 行 后 ， 如 果 在 “名 字 ” 文 本 框 中 输入 信息 ， 则 自动 弹出 文字 键盘 ， 


H 


srs RR 0000 


如 图 18-2 所 示 。 如 果 在 “编号 ”文本 框 中 输入 信息 ， 则 自动 弹出 数字 键盘 ， 如 图 18-3 所 示 。 


MNO 


TUV WXYZ 


图 18-2 自动 弹出 文字 键盘 图 18-3 ”自动 弹出 数字 键盘 


另外 , 为 了 以 一 种 可 访问 的 方式 来 隐藏 标签 ， 可 以 为 元 素 附 加 ui-hidden-accessible 样式 。 例 如 可 以 
在 上 述 代 码 中 将 该 技术 应 用 到 搜索 字段 中 ， 这 就 可 以 在 保留 显示 兼容 性 的 同时 将 标签 隐藏 起 来 。 

在 构建 表单 时 ， 一 定 要 将 输入 字段 与 其 语义 类 型 关联 起 来 ， 这 种 关联 有 如 下 所 示 的 两 种 优势 。 

(1) 当 输 入 字段 接收 到 焦点 时 ， 它 会 为 用 户 显示 合适 的 键盘 。 例 如 ， 被 指明 为 type="number" 的 
字段 会 自动 向 用 户 显示 一 个 数字 键盘 。 使 用 type="tel" 进 行 关联 的 字段 ， 则 会 显示 一 个 特定 的 电话 号 码 
键盘 。 

(2) 该 规范 允许 浏览 器 针对 字段 类 型 应 用 验证 规则 。 在 用 户 填写 表单 期 间 ， 浏 览 器 能 够 自动 对 每 
个 字段 类 型 进行 实时 验证 。 

所 有 移动 浏览 器 都 能 够 很 好 支持 的 另外 一 个 特性 是 placeholder 属性 。 该 属性 为 文本 输入 添加 了 一 


注意 : 搜索 字段 (type="search") 的 样式 和 行为 与 其 他 输入 类 型 略微 不 同 。 它 包含 一 个 左 对 齐 的 “搜索 ” 
图 标 ， 而 且 它 的 左右 两 个 圆 角 呈 胶囊 形 状 。 当 用 户 输入 文本 时 ， 则 会 出 现 一 个 右 对 齐 的 “删除 ” 
图 标 ， 用 于 清除 用 户 的 输入 。 


18.2.1 动态 输入 文本 


在 jQuery Mobile 应 用 中 , textinput 插件 是 一 个 能 够 自动 增强 文本 输入 和 文本 区 域 的 微 件 (widget)， 
设计 人 员 可 以 使 用 该 插件 来 动态 创建 、 启 用 和 禁用 文本 输入 。 


18.2.2 文本 输入 选项 


在 jQuery Mobile 应 用 中 ，text 输入 框 包 含 如 下 所 示 的 选项 。 
(1) initSelector: 这 是 一 个 CSS 选择 器 ， 此 选项 用 来 定义 被 自动 初始 化 为 输入 框 的 选择 器 ， 例 如 
元 素 类 型 和 数据 规则 等 。 其 默认 值 如 下 。 
M input[type-'text']. 
回 input[type='search']。 


DU Android SD mw se 


jqmbData(type-'search"). 

input[type-'number ]. 

jqmData(type-'number"). 

input[type-'password']. 

input[type-'email']. 

input[type-'url']. 

input[type-'tel']. 

textarea, input:not([type]) ə 

如 果 要 改变 被 初始 化 的 元 素 ， 可 以 给 mobileinit 事件 绑 定 该 选项 。 例 如 : 

$( document ).bind( "mobileinit", function(){ 
$.mobile.textinput.prototype.options.initSelector = ".mylInputs"; 

六 


(2) theme: 这 是 一 个 字符 串 ， 默 认为 null, 用 于 继承 父 容器 , 给 该 组 件 的 所 有 实例 设 定 颜色 主题 ， 


ARARARARRARA 


接受 a—z 的 一 个 字母 来 映射 主题 。 在 默认 情况 下 ， 它 继承 父 容器 的 相同 主题 。theme 选项 也 可 以 通过 
data-theme="a" 的 属性 来 配置 。 例 如 : 


$('.selector').textinput({ theme: "a" }); 


18.2.3 ”文本 输入 方法 


在 jQuery Mobile 应 用 中 ，textinput 插件 具有 如 下 所 示 的 方法 。 
(1) enable: 功能 是 设置 一 个 输入 框 可 用 。 例 如 : 


$('.selector').textinput('enable"); 
(2) disable: 功能 是 设置 一 个 输入 框 不 可 用 。 例 如 : 
$('.selector').textinput('disable"); 


18.24 文本 输入 事件 


在 jQuery Mobile 应 用 中 ， 可 以 给 input 元 素 直接 绑 定 事件 ， 可 以 使 用 jQuery Mobile 的 虚拟 事件 ， 


或 者 绑 定 JavaScript 的 标准 事件 ， 如 change. focus 和 blur 等 。 例 如 : 


$( ".selector" ).bind( "change", function(event, ui) ( 


» 
在 jQuery Mobile NH] rh, textinput 插件 支持 的 事件 是 create, 74 input 被 创建 时 触发 。 例 如 : 
$( "selector" ).textinput(( 
create: function(event, ui) ( ... ) 
» 


下 面 通过 一 个 具体 实例 的 实现 过 程 , 详细 讲解 在 Android 中 使 用 textinput 插件 动态 输入 文本 的 方法 。 


e. 
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C 实例 18-3: 使 用 textinput 插件 动态 输入 文本 
源码 路 径 : 光盘 :\codes\18\dynamic-text.html 


实例 文件 dynamic-text.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" data-theme="b"> 
<div data-role-"header"» 
<h1> 动 态 输入 文本 </h1> 
</div> 


<div data-role="content"> 
<form id="test" action="#" method="post"> 
«a href="#" data-role="button" id="create-text1"> 创 建文 本 输入 框 1</a> 
«a href="#" data-role="button" id="create-text2"> 创 建文 本 输入 框 2</a> 
<br><br> 
<a href="#" data-role="button" id="disable-text1" data-theme="a"> 不 可 用 输入 框 1</a> 
«a href="#" data-role="button" id="enable-text1" data-theme="a"> 可 用 输入 框 1</a> 
</form> 
</div> 
«script type="text/javascript"> 
$( "#create-text1" ).bind( "click", function() { 
$('«input type="text" name="text1" id="text1" value="" placeholder-"text1" data-theme-"c" /»' ) 
insertAfter( "#create-text1" ) 
-textinput(); 
» 


S$( "#create-text2" ).bind( "click", function() ( 
$('«input type="text" name-"text2" id-"text2" value=" placeholder-"text2" />' ) 
insertAfter( "#create-text2" ) 
-textinput(( 
theme: 'c', 
create: function(event) ( 
console.log( "Creating text input..." ); 
for (prop in event) ( 
console.log(prop + ' = ' + event[prop]); 
) 


» 
» 


$( "#disable-text1" ).bind( "click", function() { 
$( "#text1").textinput( "disable" ); 
» 


$( "#enable-text1" ).bind( "click", function() ( 
$( "#text1" ).textinput( "enable" ); 
H: 
</script> 
</div> 


执行 后 的 初始 效果 如 图 18-4 所 示 。 单 击 某 个 按钮 后 会 自动 创建 一 个 文本 输入 框 ， 例 如 单 击 “ 创 建 
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文本 输入 框 1” 按 钮 后 会 创建 一 个 如 图 18-5 所 示 的 输入 框 。 


动态 输入 文本 


创建 文本 输入 框 1 
创建 文本 输入 框 2 


不 可 用 输入 框 1 
可 用 输入 框 1 


18-4 初始 效果 18-5 ”自动 创建 一 个 文本 输入 框 


18.3 选择 菜单 


WEERA 
创建 文本 输入 征 2 


可 用 输入 框 1 


G2 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 18 章 \ 选 择 菜单 .avi 
在 jQuery Mobile NH], jQuery Mobile 框架 能 够 自动 增强 所 有 本 地 的 选择 元 素 。 在 默认 情况 下 ， 
通过 单 击 该 选择 按钮 的 方式 ， 可 以 为 移动 设备 启动 本 地 选择 器 。 


实例 18-4: 在 Android 中 使 用 选择 菜单 
源码 路 径 : 光盘 :\codes\18\select.html 


实例 文件 select.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" data-theme="b"> 
«div data-role-"header"» 
<h1> 使 用 选择 菜单 </h1> 
</div> 


<div data-role="content"> 
<form id="test" id="test" action="#" method="post"> 


<p> 
«label for="genre"> 属 性 :</label> 
«select name-"genre" id-"genre" multiple="multiple"> 
«option value="action">Action</option> 
«option value-"comedy"» Comedy-/option- 
«option value="drama">Drama</option> 
«option value-"romance"»Romance-/option- 
</select> 
«Ip» 
<p> 
<label for="delivery"> 方 式 :</label> 


e. 


HIE o 


«select name-"delivery" id-"delivery"» 
«option value="barcode"> 电 子 客 票 </option> 
«option value="nfc">NFC</option> 
«option value="overnight"> 晚 上 送 </option> 
<option value="express"> 快 递 </option> 
<option value="ground"> 地 面 </option> 
«option value="overnight"> 在 晚上 </option> 
<option value="express"> 快 递 </option> 
<option value="standard"> 地 面 </option> 
<optgroup label="Digital"> 
«option value-"barcode" selected>E-Ticket</option> 
«option value-"nfc"»NFC«/option» 
*loptgroup» 
«optgroup label-"FedEx"» 
«option value-"overnight"» Overnight«/option- 
<option value-"express"»Express«/option 
<option value="ground">Ground</option> 
*loptgroup» 
«optgroup label-"US Mail" 
«option value-"overnight"» Overnight«/option» 
<option value-"express"»Express«/option» 
«option value-"standard"» Standard«/option 


</optgroup> 
</select> 
«Ip» 
«Iform» 
</div> 


</div> 


在 用 户 进行 选择 之 后 ， 选 择 按 钮 会 显示 已 选 定 选项 的 值 。 如 果 对 按钮 来 说 ， 文 本 值 太 长 ， 则 文本 
将 会 被 截断 ， 并 在 后 面 显示 一 个 省 略 号 。 此 外 ， 在 用 户 选择 了 多 个 选项 后 ， 被 选中 的 选项 会 被 标记 为 
计数 泡 或 其 他 标记 样式 。 这 是 一 个 可 以 用 来 突出 显示 已 选择 选项 的 数量 的 视觉 效果 。 执 行 后 的 初始 效 
果 如 图 18-6 所 示 。 选 择 某 个 选项 后 会 自动 弹出 该 选项 下 面 的 菜单 ， 例 如 单 击 “ 方 式 ” 后 面 的 圆 后 会 弹 
出 一 个 如 图 18-7 所 示 的 菜单 框 。 


在 晚上 


图 18-6 初始 效果 图 18-7 弹出 选项 下 的 菜单 框 


注意 : 在 使 用 multiple="multiple" 属 性 创建 选择 菜单 时 ， 有 些 移动 平台 不 支持 多 选 特性 。 在 需要 使 用 多 
选 菜单 时 ， 建 议 使 用 自 定 义 菜单 。 


E Android D RISTER HERE 


18.3.1 自 定义 选择 菜单 


在 jQuery Mobile 应 用 中 ， 蔡 代 本 机 呈现 选项 列表 的 一 个 方法 是 : 使 用 一 个 自 定义 的 HTML/CSS 
视图 来 呈现 选择 菜单 ， 并 且 可 以 为 选择 元 素 添加 如 下 所 示 的 属性 。 


data-native-menu-"false" 


与 本 机 呈现 菜单 相 比 ， 以 自 定义 方式 呈现 选择 菜单 的 优点 如 下 。 

回 在 所 有 设备 上 提供 了 统一 的 用 户 体验 。 

回 自 定 义 菜单 普遍 支持 多 选 的 选项 列表 。 

EI ”增加 了 一 种 优雅 的 方式 来 处 理 占 位 符 选 项 〈 占 位 符 选项 相关 的 知识 将 在 18.3.2 节 介绍 )。 

回 自 定 义 菜单 是 可 主题 化 的 。 

与 本 机 呈现 菜单 相 比 ， 以 自 定义 方式 呈现 选择 菜单 的 缺点 是 性 能 要 差 一 些 。 特 别 是 当 相 比较 的 菜 
单 中 包含 许多 选项 时 ， 这 种 性 能 差距 会 表现 得 更 加 明显 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 实现 一 个 自 定义 选择 菜单 的 方法 。 


实例 18-5: 在 Android 中 实现 一 个 自 定义 选择 菜单 
源码 路 径 光盘 :\codes\18\custom html 


实例 文件 custom.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" data-theme="b"> 
«div data-role-"header"» 
<h1> 使 用 选择 菜单 </h1> 
</div> 


<div data-role="content"> 
<form id-"test" id-"test" action="#" method="post"> 


<br><br> 
<p> 
<label for="genre"> 选 择 :</label> 
«select name="genre" id="genre" data-native-menu-"false" data-theme="a"> 
«option value="null"> 选 择 一 个 .…</option> 
«option value="action">qq</option> 
«option value="comedy">ww</option> 
«option value="drama">rr</option> 
«option value="romance">tt</option> 
<l-- Alternate placeholder options: 
«option value-""»Select one...</option> 
«option value=""></option> 


一 > 
</select> 
«p» 
«br» «br» «br» «br» «br» 
<p> 


«label for="delivery"> 方 式 :</label> 
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«select name-"delivery" id-"delivery" data-native-menu-"false" data-theme="d"> 
«option value="> 选 择 一 个 .</option> 
«option value="barcode">aa</option> 
«option value="nfc">bb</option> 
«option value="overnight">cc</option> 
<option value="express">dd</option> 
<option value="ground">ee</option> 
«option value="overnight">ff</option> 
<option value="express">gg</option> 
«option value="standard">hh</option> 
<optgroup label="Digital"> 
«option value="barcode">E-Ticket</option> 
«option value="nfc">NFC</option> 
<loptgroup> 
<optgroup label="FedEx"> 
<option value="overnight">Overnight</option> 
<option value="express">Express</option> 
<option value="ground">Ground</option> 
</optgroup> 
<optgroup label="US Mail"> 
<option value="overnight">Overnight</option> 
<option value="express">Express</option> 
<option value="standard">Standard</option> 


</optgroup> 
</select> 
«Ip» 
</form> 
</div> 


执行 后 的 初始 效果 如 图 18-8 所 示 。 选 择 某 个 选项 后 会 自动 弹出 该 选项 下 面 的 菜单 ， 例 如 单 击 “ 方 
式 ” 后 面 的 圈 后 会 弹出 一 个 如 图 18-9 所 示 的 菜单 框 ， 该 菜单 框 是 用 自 定义 样式 实现 的 。 


图 18-8 初始 效果 图 18-9 ”弹出 选项 下 的 菜单 框 


18.8.2 ” 占 位 符 选项 


n 


在 jQuery Mobile 应 


Fh， 对 自 定义 选择 菜单 来 说 ， 占 位 符 是 一 个 独特 的 特性 ， 它 具有 如 下 所 示 的 
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3 个 优势 。 
COD 占 位 符 要 求 用 户 做 出 一 个 选择 。 在 默认 情况 下 ， 如 果 没 有 配置 占 位 符 ， 则 列表 中 的 第 一 个 选 
项 会 被 选中 。 


(20. 占 位 符 可 以 为 未 选 定 的 选择 按钮 显示 提示 文本 。 

(3) 在 显示 选项 列表 时 ， 占 位 符 也 可 以 作为 页 眉 来 显示 。 

在 jQuery Mobile 应 用 中 ， 可 以 用 如 下 3 种 方式 来 配置 占 位 符 。 
COD 为 选项 添加 不 带 有 任何 值 的 文本 ， 例 如 : 


«option value="">Select one...</option> 

(2) 在 选项 包含 文本 和 值 时 ， 可 以 为 其 添加 data-placeholder="true" 属 性 。 例 如 : 
«option value-"null" data-placeholder-"true"»Select one...</option> 

(3) 如 果 需 要 一 个 不 带 有 提示 文本 和 页 眉 的 字段 ， 可 以 使 用 一 个 空 选项 。 例 如 : 
«option value=""></option> 


18.3.3 ”动态 选择 菜单 


在 jQuery Mobile 应 用 中 ， 插 件 selectmenu 是 一 个 能 自动 增强 选择 菜单 的 微 件 。 使 用 该 插件 ， 能 够 
动态 创建 、 启 用 、 禁 用 、 打 开 或 关闭 选择 菜单 。 


18.3.4 ”选择 菜单 选项 


在 jQuery Mobile 应 用 中 ， 插 件 selectmenu 有 如 下 所 示 的 选项 。 
(1) comers boolean， 默 认 值 为 true。 
与 其 他 按钮 类 型 一 样 ， 选 择 菜单 按钮 在 默认 情况 下 也 是 圆 角 的 。 将 该 选项 设置 为 false 可 以 移 除 圆 
角 。 该 选项 还 可 以 公开 作为 一 个 数据 属性 : data-comers="false"。 例 如 : 
S("fselecti1").selectmenu((corners: false]); 
(2) disabled boolean， 默 认 值 为 false， 表 示 禁 用 该 元 素 。 
selectmenu 插件 也 有 enable 和 disable 方法 ， 用 来 动态 启用 和 禁用 控件 。 例 如 : 


S$("select1").selectmenu(( disabled: true}); 


(3) hidePlaceholderMenultems boolean， 默 认 值 为 true. 
在 默认 情况 下 ， 当 选择 菜单 打开 时 ， 占 位 符 菜 单条 目 是 隐藏 不 可 见 的 。 为 了 让 占 位 符 条 目 是 可 选 
择 的 ， 将 该 值 设置 为 false。 例 如 : 


S$("select1").selectmenu(( hidePlaceholderMenultems: false)); 


(4) icon string， 默 认 值 为 arrow-d。 
用 于 设置 选择 按钮 的 图 标 ， 该 选项 还 可 以 公开 作为 一 个 数据 属性 : data-icon="plus"。 例 如 : 


S$("select1").selectmenu(( icon:"plus")); 
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(5) iconpos string， 默 认为 right。 

用 于 设置 图 标 位 置 。 可 能 的 值 为 left、right、none 和 notext. notext 值 会 将 选择 按钮 (select) 显示 
为 一 个 只 带 有 图 标的 按钮 ， 而 且 该 按钮 没有 占 位 符 文本 。none 值 将 会 彻底 移 除 图 标 。 该 选项 还 可 以 公 
开 作 为 一 个 数据 属性 : data-iconpos="notext"。 例 如 : 


$("#select1").selectmenu({iconpos: "notext"}); 


(6) iconshadow boolean， 默 认 值 为 true. 
当 该 选项 的 值 为 tue 时 ，jQuery Mobile 框架 会 为 图 标 添加 阴影 。 该 选项 可 以 公开 作为 一 个 数据 属 
TE: data-iconshadow="false"。 例 如 : 
$("#select1").selectmenu({ iconshadow: false}); 


(7) initSelector， 这 是 一 个 CSS 选项 ， 默 认 值 为 "select:not(:jqmData(role='slider"))"。 

initSelector 定义 用 来 触发 widget 插件 自动 初始 化 的 选择 器 (元 素 类 型 、 数 据 角 色 [data role] 等 ) 。 
例如 ， 由 默认 选择 器 匹配 的 所 有 元 素 都 会 被 selectmenu 插件 增强 。 为 了 重 写 该 选择 器 ， 可 以 绑 定 到 
mobileinit 事件 ， 并 根据 情况 更 新 选择 器 。 例 如 : 

$( document ).bind("mobileinit" function()( 

$.mobile.selectmenu.prototype.options.initSelector-"..": 

P: 

(8) inline boolean， 默 认 值 为 false。 

如 果 该 选项 设置 为 tue， 则 会 让 选择 按钮 以 内 嵌 〈inline) 按钮 的 形式 显示 。 在 默认 情况 下 ， 选 择 
按钮 会 占据 其 容器 的 整个 宽度 。 与 之 相对 的 是 ， 内 嵌 按 钮 只 占据 其 占 位 符 文 本 的 宽度 。 该 选项 还 可 以 
公开 作为 一 个 数据 属性 : data-inline="true"。 例 如 : 

$("#select1").selectmenu({ inline: true)); 


(9) nativeMenu boolean， 默 认 值 为 true。 
在 默认 情况 下 ， 选 择 按钮 会 为 OS 启动 本 地 的 选择 器 Cselect picker) 。 要 以 自 定义 的 HTML/CSS 视 
图 来 呈现 选择 菜单 ， 需 要 将 该 值 设 置 为 false。 该 选项 还 可 以 公开 作为 一 个 数据 属性 : data-native="false"。 
例如 : 
$("#select1"):selectmenu({native: false)); 


(10) shadow boolean， 默 认 值 为 true。 
在 默认 情况 下 ， 选 择 按钮 会 应 用 阴影 。 将 该 选项 设置 为 false 则 会 移 除 阴影 。 该 选项 还 可 以 公开 作 
为 一 个 数据 属性 : data-shadow="false"。 例 如 : 
S$("éiselect1").selectmenu(( shadow-false)); 


(11) theme string， 默 认 值 为 null.Inherited from parent. 
用 于 为 元 素 设置 主题 调 色 板 配 色 方 案 。 这 是 一 个 取 值 范围 为 az 的 字母 ， 它 映射 到 主题 中 所 包含 
的 调 色 板 。 默 认 情 况 下 ， 元 素 会 继承 其 父 容器 的 同一 个 调 色 板 颜色 。 该 选项 还 可 以 公开 作为 一 个 数据 
属性 : data-theme="a"。 例 如 : 


S$("select1").selectmenu(( theme:"a"]); 
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3.5 选择 菜单 的 方法 

在 jQuery Mobile 应 用 中 ， 插 件 selectmenu 具有 如 下 所 示 的 方法 。 

(1) enable， 用 于 启用 一 个 被 禁用 的 选择 按钮 。 例 如 : 

$( "#select1" ).selectmenu( "enable" ); 

(2) disable， 用 于 禁用 一 个 选择 按钮 。 例 如 : 

$( "#select1" ).selectmenu( "disable" ); 

(D open， 用 于 打开 一 个 关闭 的 选择 按钮 。 该 方法 只 能 用 于 自 定 义 选 择 。 例 如 : 
$("#select1").selectmenu("open"); 

(4) close， 用 于 关闭 一 个 打开 的 选择 按钮 。 该 方法 只 能 用 于 自 定 义 选择 。 例 如 : 
$("#select1").selectmenu("close"); 


(5) refresh， 用 于 更 新 自 定义 的 选择 菜单 。 该 方法 会 更 新 自 定义 的 选择 菜单 ， 以 反映 本 地 的 选择 


元 素 的 值 。 例如， 如 果 本 地 选择 的 selectedIndex 被 更 新 ， 可 以 调用 refresh 方法 来 重新 构建 自 定义 选择 。 
如 果 传 递 了 一 个 true 参数 ， 可 以 强制 进行 更 新 并 重新 构建 自 定义 选择 。 例 如 : 


var myselect=$("#selectl"); 
myselect[0].selectedIndex-2; 
myselect.selectmenu("refresh"); 
myselect.selectmenu("refresh", true); 


18.3.6 ”选择 菜单 的 事件 


在 jQuery Mobile 应 用 中 ， 插 件 selectmenu 支持 事件 create。 该 事件 在 创建 一 个 选择 菜单 时 触发 ， 


它 并 不 是 用 来 创建 一 个 自 定义 元 素 。 例 如 : 


$('<select name="select2" id="select2">…< / select»") 
nsertAfter(" select") 
.selectmenu(( 

create:function(event)( 

console.log("Creating select menu..."); 

) 

P: 


下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 实现 动态 选择 菜单 效果 的 方法 。 


iC 实例 18-6: 在 Android 中 实现 动态 选择 菜单 效果 
源码 路 径 : Jti codes 18 dynamic-select.html 


实例 文件 dynamic-selecthtml 的 具体 实现 代码 如 下 。 


<div data-role-"page" data-theme="b"> 
«div data-role-"header"» 
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<h1> 选 择 菜单 </h1> 
</div> 


<div data-role="content"> 
<form id="test" id="test" action="#" method="post"> 
«a href="#" id="create-select1" data-role="button"> 创 建 菜单 1</a> 
«a href="#" id="create-select2" data-role="button"> 创 建 菜单 2</a> 
«br» 


<p style-"text-align:center;"» «strong» JA 75 ;&:«/strong» «/p 
«a href="#" id-"auto-select1" data-role-"button" data-theme="a"> 刷 新 菜单 1</a> 


«a href="#" id-"disable-select1" data-role-"button" data-theme="a"> 不 显示 菜单 1</a> 
«a href="#" id="enable-select1" data-role="button" data-theme="a"> 显 示 菜单 1</a> 


«a href="#" i pen-select2" data-role-"button" data-theme="a"> 打 开 菜单 2</a> 
«a href="#" id-"close-select2" data-role-"button" data-theme="a"> 关 闭 菜单 2</a> 
</form> 
</div> 


«script type="text/javascript"> 
$( "#create-select1" ).bind( "click", function() { 
$( '<select name="select1" id="select1" data-theme="e"><option value="action">Action </option> 
<option value="comedy">Comedy</option><option value="drama">Drama</option><option value= "romance"> 
Romance</option></select>' ) 
.insertAfter( "#create-select1" ) 
.selectmenu(); 


HE 


$( "#create-select2" ).bind( "click", function() { 
$( "<select name-"select2" id="select2"><option value="">Select one...</option><option value= 
"action">Action</option><option value="comedy">Comedy</option><option value="drama">Drama</option><option 
value="romance">Romance</option></select>' ) 
.insertAfter( "#create-select2" ) 
.selectmenu(( 

corners: true, 

disabled: false, 

hidePlaceholderMenultems: true, 

icon: "plus", 

iconpos: "right", 

iconshadow: true, 

inline: true, 

menuPageTheme: "a", // Not working 

nativeMenu: false, 

overlayTheme: "c", // Not working 

shadow: false, 

theme: "e", 

create: function(event) ( 
console.log( "Creating select control..." ); 
for (prop in event) ( 

console.log(prop + '  ' + event[prop]); 

F 


D 
D 
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$( "#auto-select1" ).bind( "click", function() { 
var myselect = $( "select#select1" ); 
myselect[0].selectedIndex = 2; 
myselect.selectmenu( "refresh", true ); 
H: 


$( "#disable-select1" ).bind( "click", function() ( 
S$("selectéselect1").selectmenu( "disable" ); 
» 


$( "#enable-select1" ).bind( "click", function() { 
$( "selecti£select1" ).selectmenu( "enable" ); 
» 


$( "#open-select2" ).bind( "click", function() ( 
$( "select#select2" ).selectmenu( "open" ); 
D: 


$( "#close-select2" ).bind( "click", function() ( 
$( "select#select2" ).selectmenu( "close" ); 
y 


</script> 
</div> 
执行 后 的 初始 效果 如 图 18-10 所 示 。 单 击 某 个 按钮 后 会 执行 对 应 的 操作 ， 例 如 单 击 “ 创 建 菜 单 1” 
按钮 后 会 创建 一 个 如 图 18-11 所 示 的 菜单 。 
— —Y 


调用 方法 : 
LLLI 
IF 


图 18-10 初始 效果 图 18-11 创建 一 个 菜单 
184 3X zd 


GR 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 18 章 \ 单 选 按钮 .avi 
在 jQuery Mobile 应 用 中 ， 单 选 按钮 只 允许 用 户 选 择 一 个 条 目 。 例如， 在 从 多 个 应 用 程序 设置 选项 


菜单 1 
:菜单 
81 
ES 

Rm 
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中 选择 一 个 设置 时 ， 通 常会 使 用 单 选 按钮 来 实现 ， 原 因 是 单 选 按钮 比较 简单 而 且 易 于 使 用 。 用 户 可 以 
通过 选中 单 选 按钮 来 完成 他 们 的 选择 ，jQuery Mobile 会 自动 更 新 底层 的 表单 控件 。 

默认 情况 下 ， 单 选 按 钮 会 继承 其 父 控件 的 主题 。 如 果 想 为 单 选 按钮 应 用 其 他 主题 ， 需 要 为 相应 单 
选 按钮 的 标签 添加 data-theme 属性 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲解 在 Android 中 使 用 单 选 按钮 的 方法 。 


区 | 实例 18-7: 在 Android 中 使 用 单 选 按钮 


源码 路 径 : 光盘 :\codes\18\radio html 


实例 文件 radio.html 的 具体 实现 代码 如 下 。 


«div data-role="page"> 


<div data-role="header"> 


<h1> 使 用 单 选 按钮 </h1> 


</div> 


<div data-role="content"> 


<form id="test" id="test" action="#" method="post"> 


<fieldset data-role="controlgroup"> 
<legend> 地 图 模式 :</legend> 

<input type="radio" name="map" id="map1" value="Map" checked="checked" /> 
«label for-"map1" data-theme="b"> 街 道 </label> 

«input type="radio" name-"map" id="map2" value-"Satellite" /> 
«label for-"map2" data-theme="b"> 卫 星 </label> 

«input type="radio" name-"map" id="map3" value-"Hybrid" /> 

«label for="map3" data-theme-"b"» &fi «/label» «/fieldset» 


<fieldset data-role-"controlgroup" data-type-"horizontal"» 
<legend> 观 看 模式 :</legend> 
«input type="radio" name="map" id="map1" value="Map" checked="checked" /> 
<label for="map1"> 城 区 </label> 


«input type="radio" name="map" id="map2" value="Satellite" /> 
<label for="map2"> 卫 星 </label> 


«input type-"radio" name="map" id="map3" value-"Hybrid" /> 
«label for="map3"> 俯 视 </label></fieldset> 


</form> 


</div> 
</div> 


在 上 述 实例 代码 中 添加 了 如 下 3 个 额外 的 属性 ， 以 帮助 设计 和 放置 单 选 按 钮 。 


[ra] 


第 1 个 属性 data-role-"controlgroup": 对 按钮 进行 编组 ， 而 且 编 组 后 的 按钮 是 圆 角 的 。 


回 第 2 个 属性 data-type="horizontal": 重 写 按钮 默认 的 垂直 定位 ， 以 水 平方 式 显 示 按 钮 。 
WM 第 3 个 属性 : 用 来 对 按钮 进行 主题 化 。 
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执行 后 的 效果 如 图 18-12 所 示 。 


使 用 单 选 按钮 
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图 18-12 执行 效果 


如 果 水 平 放置 的 单 选 按钮 的 容器 无 法 在 一 行内 显示 所 有 的 单 选 按钮 ， 则 按钮 会 发 生 重合 现象 。 为 
了 避免 重 登 ， 可 以 通过 如 下 代码 减 小 按钮 的 字体 大 小 。 


ui- controlgroup- horizontal.ui- radio label{ 
font-size:13px important; 


) 


18.4.1 ” 复 选 框 和 单 选 按钮 的 选项 


在 jQuery Mobile 应 用 


中 ，checkboxradio 插件 是 一 个 可 重用 的 微 件 ， 能够 自动 增强 单 选 按钮 和 复 选 


框 。 通 过 该 插件 ， 可 以 动态 创建 、 启 用 、 禁 用 和 刷新 单 选 按钮 。 


在 jQuery Mobile 应 用 


中 ，checkboxradio 插件 具有 如 下 所 示 的 选项 。 


(1) initSelector， 这 是 一 个 CSS 选项 ， 默 认 值 为 
input[type='checkbox],input[type='radio] 
initSelector 用 于 定义 用 来 触发 widget 插件 自动 初始 化 的 选择 器 (元 素 类 型 、 数 据 角 色 [data role] 等 ) 。 
例如 ， 由 默认 选择 器 匹配 的 所 有 元 素 都 会 被 checkboxradio 插件 增强 。 要 重 写 该 选择 器 ， 可 以 绑 定 到 
mobileinit 事件 ， 然 后 根据 情况 更 新 选择 器 。 例 如 : 


$(document).bind("mobileinit",function(){ 
$.mobile.checkboxradio.prototype.options.initSelector-"---": 


P: 


(2) theme string， 默 认 值 为 nulLInherited from parent. 

能 够 为 复 选 框 或 单 选 按钮 设置 主题 调 色 板 配 色 方 案 ， 这 是 一 个 取 值 范围 为 a 一 z 的 字母 ， 它 映射 到 
主题 中 所 包含 的 调 色 板 。 在 默认 情况 下 ， 它 会 继承 其 父 容器 的 同一 个 调 色 板 颜色 。 该 选项 还 可 以 公开 
作为 一 个 数据 属性 : data-theme="a"。 例 如 : 

$("#elementi").checkboxradio({ theme:"a"]); 
注意 : 有 关 使 用 复 选 框 的 基本 知识 将 在 18.5 节 中 进行 详细 讲解 。 


e. 


xus ge 000 


18.4.2” 复 选 框 和 单 选 按钮 的 方法 
在 jQuery Mobile 应 用 中 ，checkboxradio 插件 有 如 下 所 示 的 方法 。 
(1) enable， 用 于 启用 一 个 被 禁用 的 复 选 框 或 单 选 按钮 。 例 如 : 
$("#element1").checkboxradio("enable"); 
(2) disable， 用 于 禁用 一 个 复 选 框 或 单 选 按钮 。 例 如 : 
$("#elementi").checkboxradio("disable"); 
(3) refresh， 用 于 更 新 自 定义 的 复 选 框 或 单 选 按钮 。 该 方法 用 来 更 新 自 定 义 的 复 选 框 或 单 选 按钮 ， 
以 反映 本 地 元 素 的 值 。 例 如 可 以 动态 选中 一 个 单 选 按钮 ， 然 后 调用 refresh 方法 来 重建 增强 的 控件 。 
$("#elem1").attr("checked",true).checkboxradio("refresh"); 


18.4.3” 复 选 框 和 单 选 按钮 的 事件 


在 jQuery Mobile 应 用 中 ，checkboxradio 插件 支持 事件 create， 当 创建 一 个 复 选 框 或 单 选 按钮 时 会 
触发 该 事件 。 它 不 是 用 来 创建 一 个 自 定义 元 素 。 例 如 : 


$(#element1) 

.checkboxradio(( 
theme:"e", 
create:function(event)( 
console.log("Creating new element... "); 


y 
» 
下 面 通 过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 动态 单 选 按钮 的 方法 。 


实例 文件 dynamic-radio.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" data-theme="b"> 
<div data-role-"header"» 
<h1> 使 用 单 选 按钮 </h1> 
</div> 


«div data-role="content"> 
<form id="test" id="test" action="#" method="post"> 
<a href="#" id="create-radio1" data-role="button"> 创 建 按钮 1</a> 
<a href="#" id="create-radio2" data-role="button"> 创 建 按钮 2</a> 
<br> 


<p style="text-align:center;"><strong> 调 用 方法 :</strong></p> 
«a href="#" id="auto" data-role="button" data-theme="a"> 选 择 选 项 </a> 
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«a href="#" id-"disable" data-role-"button" data-theme="a"> 选 项 不 可 用 </a> 
«a href="#" id="enable" data-role="button" data-theme="a"> 选 项 可 用 </a> 
</form> 
</div> 
«script type="text/javascript"> 
$( "#create-radio1" ).bind( "click", function() { 
$( '«fieldset data-role="controlgroup"><legend>Map view:</legend><input type="radio" name= 
"map" id-"map1" value-"Map" /><label for-"map1" data-theme="c">Map</label><input type="radio" name= 
"map" id-"map?2" value-"Satellite" /><label for-"map2" data-theme-"c"»Satellite«/label»«/fieldset»' ) 
insertAfter( "#create-radio1" ); 
$.mobile.pageContainer.trigger( "create" ); 
» 


$( "#create-radio2" ).bind( "click", function() ( 
$( '«fieldset data-role-"controlgroup"» «legend» Map view:«/legend» «input type="radio" name= 
"map" id-"m1" value-"Map" checked-"checked" /»«label for-"m1"»Map«/label»«input type="radio" name= 
"map" id-"m2" value-"Satellite" /»«label for-"m2"»Satellite«/label» «/fieldset^' ) 
insertAfter( "#create-radio2" ); 
S( "iim" ) 
.checkboxradio(( 
theme: "e", 
create: function(event) ( 
console.log( "Creating radio buttons..." ); 


) 
»: 
$( "#m2" ) 
.checkboxradio(( 
theme: "e", 
create: function(event) ( 
console.log( "Creating radio buttons..." ); 
) 
» 
$.mobile.pageContainer.trigger( "create" ); 


» 


$( "#auto" ).bind( "click", function() ( 
$( "#map2" ).attr( "checked", true ).checkboxradio( "refresh" ); 
» 


$( "#disable" ).bind( "click", function() { 
S$("i&map2").checkboxradio( "disable" ); 
» 


$( "enable" ).bind( "click", function() ( 
$( "#map2" ).checkboxradio( "enable" ); 
H: 
</script> 
</div> 
执行 后 的 初始 效果 如 图 18-13 所 示 。 单 击 某 个 按钮 后 会 执行 对 应 的 操作 ， 例 如 单 击 “ 创 建 按钮 1” 
按钮 后 会 创建 如 图 18-14 所 示 的 单 选 按钮 。 
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创建 按钮 1 


H 
: 
i 


创建 按钮 2 


选择 选项 调用 方法 = 


选项 不 可 用 


18-13 ”初始 效果 18-14 ”创建 单 选 按钮 
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š 
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GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 18 章 \ 复 选 框 .avi 

在 jQuery Mobile 应 用 中 ， 复 选 框 是 一 个 常见 的 表单 控件 ， 允 许 用 户 从 一 系列 选项 中 选择 多 个 值 。 
用 户 可 以 选中 复 选 框 完成 自己 的 选择 ，jQuery Mobile 会 自动 更 新 底层 的 表单 控件 。 

用 于 设计 和 定位 复 选 框 的 标记 与 之 前 用 于 单 选 按 钮 的 标记 相同 ， 在 复 选 框 中 添加 了 如 下 所 示 的 3 
个 额外 属性 ， 以 帮助 设计 和 放置 复 选 框 。 

回 第 1 个 属性 data-role="controlgroup": 将 复 选 框 元 素 进行 编组 , 而 且 编 组 后 的 复 选 框 是 圆 角 的 。 

E] 第 2 个 属性 data-type="horizontal": 重 写 按钮 默认 的 垂直 定位 ， 以 水 平方 式 显示 按钮 。 

回 第 3 个 属性 : 对 按钮 进行 主题 化 。 在 默认 情况 下 ， 复 选 框 会 继承 其 父 控件 的 主题 。 如 果 想 为 

复 选 框 应 用 其 他 主题 ， 需 要 为 相应 复 选 框 的 标签 添加 data-theme 属性 。 
本 节 将 详细 讲解 在 移动 Web 中 使 用 复 选 框 的 基本 知识 和 有 具体 用 法 。 


18.5.1 动态 复 选 杠 


在 jQuery Mobile 应 用 中 ， 插 件 checkboxradio 是 一 个 能 够 自动 增强 复 选 框 和 单 选 按钮 的 微 件 。 通 
过 该 插件 可 以 动态 创建 、 启 用 、 禁 用 和 刷新 复 选 框 。 在 jQuery Mobile 中 ， 相 同 的 API 也 可 以 多 次 使 用 
于 单 选 按钮 和 复 选 框 。 


18.5.2 ”使 用 复 选 框 


下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 水 平 放置 复 选 框 的 方法 。 
E SM 实例 18-9: 在 Android HK PRE SE 
— 源码 路 径 : Jti codes 18 check html 


实例 文件 check-html 的 具体 实现 代码 如 下 。 
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«div data-role="page"> 
«div data-role="header"> 
<h1> 使 用 复 选 框 </h1> 
</div> 


<div data-role="content"> 
<form id="test" id="test" action="#" method="post"> 


<fieldset data-role="controlgroup"> 
<legend> 选 择 喜欢 的 类 型 :</legend> 

«input type="checkbox" name-"genre" id-"c1" /> 
«label for-"c1"data-theme-"c"» zi € </label> 


«input type="checkbox" name-"genre" id-"c2" /> 
<label for-"c2" data-theme-"c"» &18 «/label» 


«input type="checkbox" name-"genre" id="c3" /> 
«label forz"c3" data-theme-"c"» sf BE «/label 


</fieldset> 
<fieldset data-role-"controlgroup" data-type="horizontal"> 
<legend> 类 型 :</legend> 
«input type="checkbox" name-"genre" id="c1" /> 
<label for="c1" data-theme="b"> 古 装 </label> 


«input type="checkbox" name="genre" id="c2" /> 
<label for="c2" data-theme="b"> 言 情 </label> 


«input type="checkbox" name-"genre" id-"c3" /> 
<label for="c3" data-theme-"b"» $FE «/label 
</fieldset> 
</form> 
</div> 
</div> 


执行 后 的 效果 如 图 18-15 所 示 。 


Eri Li Lii 


图 18-15 执行 效果 


WRK FRE EXE ME BU ER TCU TE — 1T Vo PEE RU SEALED EPXEREZÉRIEBOÉSUR. HT 
避免 重合 ， 可 以 通过 如 下 代码 减 小 复 选 框 的 字体 大 小 。 


ui- controlgroup- horizontal.ui-checkbox label{ 
font-size:11px important; 


实例 18-10: 在 Android 中 使 用 动态 复 选 框 
源码 路 径 : 光盘 :\codes\18\dynamic-check.html 


实例 文件 dynamic-checkhtml 的 具体 实现 代码 如 下 。 


<div data-role-"page" data-theme="b"> 
<div data-role="header"> 
<h1> 使 用 复 选 框 </h1> 
</div> 


«div data-role="content"> 
<form id="test" id="test" action="#" method="post"> 
<a href="#" id="create-cb1" data-role-"button"» 6i S 44E 1</a> 
«a href="#" id="create-cb2" data-role-"button"» 6i 88 44E 2</a> 
<br> 


<p style="text-align:center;"><strong> 调 用 方法 :</strong></p> 
<a href="#" id="auto" data-role="button" data-theme="a"> 选 项 </a> 
«a href="#" id="disable" data-role="button" data-theme="a"> 不 可 用 选项 </a> 
«a href="#" id="enable" data-role-"button" data-theme="a"> 可 用 选项 </a> 
</form> 
</div> 
«script type-"text/javascript"» 
$( "#create-cb1" ).bind( "click", function() { 
$( '«fieldset data-role-"controlgroup"» «legend» Genre: «/legend» «input type="checkbox" name= 
"genre" id="c1" /»«label for="c1" data-theme-"c"»Action«/label» «input type="checkbox" name-"genre" id-"c2" 
/><label for="c2" data-theme-"c"» Comedy«/label» «/fieldset»' ) 
insertAfter( "screate-cb1" ); 
$.mobile.pageContainer.trigger( "create" ); 
» 


S$( "#create-cb2" ).bind( "click", function() { 
$( '«fieldset data-role-"controlgroup"» «legend» Genre: «/legend» «input type="checkbox" name= 
"genre" id-"c3" /><label for-"c3"-Action«/label»«input type="checkbox" name-"genre" id-"c4" /><label for- 
"c4"» Comedy-/label» «/fieldset-' ) 
insertAfter( "#create-cb2" ); 
$(#c3 ) 
.checkboxradio(( 
theme: "e", 
create: function(event) { 
console.log( "Creating checkbox..." ); 
) 
» 
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$(#c4 ) 
.checkboxradio(f 
theme: "e", 
create: function(event) ( 
console.log( "Creating checkbox2..." ); 
} 


D» 

$.mobile.pageContainer.trigger( "create" ); 
» 
$( "#auto" ).bind( "click", function() { 

$( "c2" ).attr( "checked", true ).checkboxradio( "refresh" ); 
H: 
$( "#disable" ).bind( "click", function() ( 

S$("itc2").checkboxradio( "disable" ); 
» 


$( "senable" ).bind( "click", function() ( 
$( "#c2" ).checkboxradio( "enable" ); 


执行 后 的 初始 效果 如 图 18-16 所 示 。 单 击 某 个 按钮 后 会 执行 对 应 的 操作 , 例如 单 击 “ 创 建 复 选 框 1” 
按钮 后 会 创建 如 图 18-17 所 示 的 复 选 框 。 


创建 复 选 框 1 oo 
创建 复 选 框 2 mend 
Comedy 
— 


调用 方法 : 


图 18-16 初始 效果 图 18-17 创建 复 选 框 
18.6 滑动 条 


GR 知识 点 讲解 : 光盘 \ 视 频 讲解 第 18 章 \ 滑 动 条 .avi 
在 jQuery Mobile 应 用 中 ,滑动 条 是 一 个 常见 的 表单 控件 ， 人 允许 用 户 在 最 小 范围 和 最 大 范围 之 间 选 


e. 


"I 


择 一 个 值 。 本 节 将 详细 讲解 在 jQuery Mobile 应 用 中 使 用 滑动 条 的 基本 知识 。 
18.6.1 滑动 条 基础 


在 jQuery Mobile 应 用 中 ， 如 果 给 标准 的 input 输入 框 设置 为 如 下 属性 。 
type-"range" 


则 可 以 使 之 成 为 滑动 条 组 件 。 输 入 框 的 value 用 来 设置 滑 块 的 起 始 位 置 , 起 始 位 置 是 根据 总 大 小 和 
value 值 计算 出 来 的 ，min 和 max 属性 的 值 是 用 来 配置 滑动 条 的 数值 范围 。 如 果 想 指定 滑动 条 的 步 进 增 
量 ， 则 可 以 添加 step 属性 ，jQuery Mobile 会 解析 这 些 属 性 来 配置 滑动 条 。 

当 滑 动 滑动 条 时 ，input 会 随 之 更 新 数值 ， 反 之 亦 然 。 需 要 注意 的 是 ,应 把 label 的 for 属性 设 为 input 
的 id 值 ， 使 它们 能 够 在 语义 上 相关 联 ， 并 且 要 用 div 容器 包 训 它们 ， 并 设 定 data-role="fieldcontain" 属 性 。 

jQuery Mobile 框架 会 自动 初始 化 ， 把 页 面 上 有 type=" range "属性 的 输入 框 都 泻 染 成 为 滑动 条 ， 而 
不 需要 data-role 属性 。 如 果 要 阻止 将 input 输入 框 泻 染 为 滑动 条 ， 可 以 给 input 输入 框 添加 data-role= 
"none" 属 性 ， 然 后 放 在 data-role="fieldcontain" 的 容器 中 。 例 如 : 

«div data-role= fieldcontain "> 

<label for-"slider"»Input slider:«/label» 


«input type-"range" name-"slider" id-"slider" value-"0" min="0" max="100"/> 
</div> 


下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 滑动 条 的 方法 。 


K 实例 18-11: 在 Android 中 使 用 滑动 条 
源码 路 径 : 光盘 :\codes\18\slider.html 


实例 文件 slider.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" data-theme="b"> 
<div data-role-"header"» 
<h1> 使 用 滑动 条 </h1> 
</div> 


<div data-role="content"> 
<form id="test" id="test" action="#" method="post"> 
«| 
«label for="volume"> 声 音 :</label> 
«input type-"range" name-"volume" id-"volume" value="5" min="0" max-"10" /> 
«p» 
«| 
<label for="brightness"> 亮 度 :</label> 
«input type-"range" name-"brightness" id-"brightness" min="0" max-"10" data-track-theme-"a 
data-theme-"d" /> 
«Ip» 
</form> 
</div> 
</div> 
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在 上 述 实例 代码 中 , 可 以 使 用 滑动 条 在 最 小 和 最 大 设置 之 间 调整 
音量 或 屏幕 亮度 。 可 以 调整 滑动 条 的 最 小 和 最 大 边界 , 也 可 以 设置 滑 
动 条 的 默认 值 。 用 户 可 以 通过 滑动 控件 的 方式 , 或 者 是 在 滑动 条 相应 


的 文本 字段 中 输入 一 个 值 的 方式 ， 来 调整 滑动 条 。 对 jQuery Mobile ”二 
来 说 ， 没 有 必要 添加 任何 标记 就 可 以 增强 滑动 条 。 带 有 ype=vange” 


的 任何 输入 元 素 都 会 被 自动 优化 。 执 行 后 的 效果 如 图 18-18 所 示 。 在 
滑动 时 ， 前 面 的 数值 会 随 之 改变 。 

在 jQuery Mobile 应 用 中 , 滑动 条 包含 如 下 两 个 可 主题 化 的 组 件 。 图 18-18 执行 效果 

ED ”滑动 条 的 前 景 组 件 。 

回 ”轨道 的 背景 组 件 。 

这 两 个 组 件 可 以 分 别 进行 主题 化 。 要 对 滑动 条 进行 主题 化 ， 需 要 为 input 元 素 添加 data-theme-"a" 
属性 ， 要 对 轨道 进行 主题 化 ， 需 要 为 input 元 素 添加 data-track- theme="a" 属 性 。 


18.6.2 ”滑动 条 的 选项 


在 jQuery Mobile 应 用 中 ，slider 插件 是 一 个 多 用 途 的 微 件 ， 能 够 自动 增强 滑动 条 和 开关 控件 。 通 
过 该 插件 ， 可 以 动态 创建 、 启 用 、 禁 用 和 开 / 关 滑动 条 控件 。slider 插件 具有 如 下 所 示 的 选项 。 

(1) disabled， 是 一 个 布尔 值 ， 默 认为 false。 

当 设置 为 true 时 会 禁用 滑动 条 ， 例 如 : 

$('.selector').slider({ disabled: true )); 


(2) highlight， 是 一 个 布尔 值 ， 默 认为 false。 
当 设置 为 true 时 会 把 滑动 条 划 过 的 部 分 设 为 高 亮 ， 例 如 : 


$('.selector').slider({ highlight: true }); 
(3) initSelector， 是 一 个 CSS 选择 符 ， 默 认为 : 
"input[type='range], :jgmData(type-'range"), ;jgmData(role-'slider')" 
此 选项 用 来 定义 被 初始 化 为 表单 按钮 的 选择 符 〈 通 过 元 素 类 型 、 数 据 规则 等 ) 。 要 改变 被 初始 化 
的 元 素 ， 需 要 给 mobileinit event 事件 绑 定 该 选项 。 例 如 : 


$( document ).bind( "mobileinit", function()( 
$.mobile.slider.prototype.options.initSelector = ".myslider"; 


» 

(4) mini， 是 一 个 布尔 值 ， 默 认为 false。 

当 设置 为 true 时 会 使 滑动 条 成 为 一 个 mini 版 本 , 也 可 以 通过 给 滑动 条 添加 data-mini="true" 来 设置 。 
例如 : 

$(.selector).slider({ mini: true }); 


(5) theme， 是 一 个 字符 串 。 默 认为 : 无 ， 继 承 父 元 素 。 
用 于 给 滑动 条 设置 主题 样式 。 接 受 az 的 主题 样式 ， 默 认 情况 下 继承 父 容器 的 主题 样式 。 也 可 以 


e. 
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通过 data-theme="a" 的 属性 来 设置 。 例 如 : 


$( ".selector" ).dialog({ overlayTheme: "e" }); 


18.6.3 ”滑动 条 的 方法 
在 jQuery Mobile 应 用 中 ，slider 插件 具有 如 下 所 示 的 方法 。 
C) enable， 用 于 启用 一 个 被 禁用 的 滑动 条 或 开关 控件 。 例 如 : 
$(.selector).slider(enable'; 
(2) disable， 使 一 个 滑动 条 不 可 用 。 例 如 : 
$(.selector').slider(disable"); 


(3) refresh， 用 于 刷新 一 个 滑动 条 。 如 果 通 过 JS 手动 修改 了 一 个 滑动 条 ， 必 须 使 用 refresh 方法 
刷新 滑动 条 。 例 如 : 


$('.selector').slider('refresh'); 
18.6.4 ”滑动 条 的 事件 


在 jQuery Mobile 应 用 中 ， 可 以 给 input 元 素 直 接 绑 定 事件 ， 可 以 使 用 jQuery Mobile 的 虚拟 事件 ， 
或 者 绑 定 JavaScript 的 标准 事件 ， 如 change, focus, blur 等 。 具 体 说 明 如 下 。 
(1) create， 当 slider 被 创建 时 触发 。 例 如 : 


$( ".selector" ).textinput({ 
create: function(event, ui) ( ... ) 
» 


(2) slidestart, 74 slider 的 交互 开始 时 触发 ， 包 括 单 击 和 拖 动 。 例 如 : 
$( "selector" ).on( 'slidestart', function( event ) ( … )); 

(3) slidestop, ^^ slider 的 交互 结束 时 触发 ， 包 括 单 击 和 拖 动 。 例 如 : 
$( ".selector" ).on( 'slidestop', function( event ) ( … }); 


下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 实现 动态 滑动 条 效果 的 方法 。 


区 实例 18-12: 在 Android 中 实现 动态 滑动 条 效果 
— 源码 路 径 : Jti codes 18 dynamic-slider. html 


实例 文件 dynamic-slider.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" data-theme="b"> 
«div data-role-"header"» 
<h1> 实 现 滑动 条 </h1> 
</div> 
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<div data-role="content"> 
<form id="test" id="test" action="#" method="post"> 
«a href="#" id="create-s1" data-role="button"> 创 建 滑动 条 1</a> 
<a href="#" id="create-s2" data-role="button"> 创 建 滑动 条 2</a> 
<br> 


<p style-"text-align:center;"» «strong» 5| FH 75;&:«/strong» «/p» 
«a href="#" i uto" data-role-"button" data-theme="a"> 设 置 亮度 10096«/a» 
«a href="#" id-"disable" data-role="button" data-theme="a"> 禁 用 亮度 </a> 
«a href="#" id="enable" data-role="button" data-theme="a"> 亮 度 可 用 </a> 
</form> 
</div> 
«script type="text/javascript"> 
$( "#create-s1" ).bind( "click", function() ( 
$( '<label for-"brightness1"»Brightnessi:«/label-«input type-"range" name-"brightness1" 
id-"brightness1" min-"0" max-"10" data-track-theme-"a" data-theme-"d" /»' ) 
insertAfter( "#create-s1" ); 
$( "#brightness1" ).slider().textinput(); 


» 


$( "#create-s2" ).bind( "click", function() ( 
$( '«label for-"brightness2"»Brightness2:«/label» «input type-"range" name-"brightness2" id= 
"brightness2" min-"0" max-"10" /> ) 
insertAfter( "#create-s2" ); 
$( "#brightness2" ).slider(( 
theme: "d", 
trackTheme: "a", 
disabled: false, 
create: function(event) ( 
console.log( "Creating slider control..." ); 
} 
J)textinput(); 
» 


$("#auto" ).bind( "click", function() ( 
$( "#brightness1" ).val( 10 ).slider( "refresh" ); 
» 
$( "disable" ).bind( "click", function() ( 
$( "#brightness1" ).slider( "disable" ); 
» 


$( "enable" ).bind( "click", function() ( 
$( "ébrightness1" ).slider( "enable" ); 


执行 后 的 初始 效果 如 图 18-19 所 示 。 单 击 某 个 按钮 后 会 执行 对 应 的 操作 , 例如 单 击 “ 创 建 滑动 条 1" 
按钮 后 会 创建 一 个 如 图 18-20 所 示 的 滑动 条 。 
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创建 滑动 条 1 
Brightness1 
创建 滑动 条 2 2 e D 


创建 滑动 条 2 
引用 方法 : 
引用 方法 : 
设置 亮度 100% 


图 18-19 初始 效果 1820 创建 一 个 滑动 条 


18.7 开关 控件 
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在 jQuery Mobile 应 用 中 ， 开 关 控 件 通常 用 来 管理 布尔 值 的 on/o 任 标记 。 开 关 在 移动 设备 上 是 一 
常用 的 UI 元 素 ， 通 常 使 用 “ 开 / 关 ” 或 者 true/false 类 型 的 数据 。 本 节 将 详细 讲解 在 jQuery Mobile 应 用 
中 使 用 开关 控件 的 基本 知识 。 


18.7.1 开关 控件 基础 


在 jQuery Mobile 应 用 中 ， 创 建 一 个 只 有 两 个 option 的 选择 菜单 就 可 以 构造 一 个 开关 。 第 一 个 option 
会 被 样式 化 为 “ 开 ”， 第 二 个 option 会 被 样式 化 为 “ 关 ”。 注意， 要 把 label 的 for 属性 设 为 input 的 id 值 ， 
使 它们 能 够 在 语义 上 相关 联 ， 并 且 要 用 div 容器 包 衷 它们 ， 并 设 定 data-role="fieldcontain" 属 性 。 例 如 : 

«div data-role= "fieldcontain "> 

«label for-"slider"» Select slider:</label> 
<select name-"slider" id-"slider" data-role-"slider"» 
«option value="off >Off</option> 
«option value="on">On</option> 
</select> 
</div> 


如 果 想 通过 JS 手动 控制 开关 ， 务 必 调 用 refresh 方法 刷新 样式 。 例 如 : 


var myswitch = $("select#bar"); 
myswitch[O].selectedIndex = 1; 
myswitch .slider("refresh"); 
由 于 开关 控件 具备 简单 和 易于 使 用 的 特点 ， 用 户 在 操作 应 用 程序 的 设置 时 ， 会 优先 选用 开关 控件 。 
要 切换 开关 ， 可 以 单 击 该 控件 ， 也 可 以 滑动 该 控件 。 要 创建 一 个 开关 控件 ， 需 要 添加 一 个 选择 元 素 ， 


图 


(0 Android 移动 网 站 开发 详解 


而 且 该 选择 元 素 带 有 data-role="slider" 属 性 ， 然 后 再 添加 两 个 选项 ， 用 来 管理 on/off 状态 。 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 开关 控件 的 方法 。 


实例 18-13: 在 Android 中 使 用 开关 控件 
源码 路 径 : Jéüb codesSswitchhtml ———— 00000 


实例 文件 switch.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" data-theme="b"> 
«div data-role-"header"» 
<h1> 使 用 开关 控件 </h1> 
</div> 


<div data-role="content"> 
<form id="test" id="test" action="#" method="post"> 
<p> 
<label for="sound"> 声 音 :</label> 
«select name-"slider" id="sound" data-role="slider"> 
«option value="off'>Off</option> 
«option value="on">On</option> 
</select> 
«Ip» 
<p> 
<label for="alerts"> 警 报 :</label> 
«select name-"slider" id-"alerts" data-role-"slider" data-track-theme-"c" data-theme="b"> 
«option valuez"off'»Off«/option» 
«option valuez"on"»On«/option» 
</select> 
«Ip» 
</div> 
</form> 
</div> 
«script type="text/javascript"> 
var alertSwitch = $("select#alerts"); 


II Set alert switch to 'on' 
alertSwitch[0].selectedIndex = 1; 
alertSwitch .slider("refresh"); 
</script> 
</div> 
执行 后 的 效果 如 图 18-21 所 示 。 


使 用 开关 控件 


警报 


图 18-21 执行 效果 
此 可 见 ， 开 关 控 件 也 包含 如 下 两 个 可 主题 化 的 组 件 。 
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回 ”名 为 滑动 条 的 前 景 组 件 。 
回 ”名 为 轨道 的 背景 组 件 。 
这 两 个 组 件 可 以 分 别 进行 主题 化 .为 了 对 滑动 条 进行 主题 化 ,需要 为 select 元 素 添 加 data-theme-"a" 


属性 ; 为 了 要 对 轨道 进行 主题 化 ， 需 要 为 select 元 素 添加 data-track- theme="a" 属 性 。 
18.7.2 ”动态 开关 事件 


在 jQuery Mobile 应 用 中 ，slider 插件 是 一 个 能 够 自动 增强 开关 控件 的 微 件 。 通 过 该 控件 ， 可 以 动 


态 创建 、 启 用 、 禁 用 和 开 / 关 开关 控件 。 在 jQuery Mobile 中 ， 相 同 的 API 也 可 以 多 次 使 用 于 开关 控件 。 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 实现 动态 开关 控件 效果 的 方法 。 


K 实例 18-14: 在 Android 中 实现 动态 开关 控件 效果 
源码 路 径 : 光盘 :\codes\18vdynamic-switch_ html 


实例 文件 dynamic-switch.html 的 具体 实现 代码 如 下 。 


<div data-role-"page" data-theme="b"> 
<div data-role-"header"» 
<h1> 动 态 开关 </h1> 
</div> 


<div data-role="content"> 
<form id="test" id="test" action="#" method="post"> 
<a href="#" id="create-switch1" data-role="button"> 创 建 开 关 1</a> 
«a href="#" id="create-switch2" data-role="button"> 创 建 开关 2</a> 
<br> 
«a href="#" id-"toggle-switch1-on" data-role="button" data-theme="a"> 切 换 开 关 1</a> 
</form> 
</div> 
«script type="text/javascript"> 
$( "#create-switch1" ).bind( "click", function() { 
$( '<select name="switch1" id-"switch1" data-role-"slider" data-theme="c"><option value="off"> 
Off</option><option value="on">On</option></select>' ) 
.insertAfter( "#create-switch1" ) 
.Slider(); 
X 


$( "#create-switch2" ).bind( "click", function() ( 
$( '<select name="switch2" id="switch2"><option value="off">Off</option><option value="on"> 
On</option></select>' ) 
insertAfter( "#create-switch2" ) 
.Slider({ 
theme: "b", 
trackTheme: "c", 
disabled: false, 
create: function(event) ( 
console.log( "Creating switch control..." ); 
for (prop in event) { 
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console.log(prop + ' = ' + event[prop]); 


D 
Y 


$( "iitoggle-switch 1-on" ).bind( "click", function() ( 
var switch1 = $( "selectéswitch1" ); 
ll Set switch1 to 'on" 
switch1[0].selectedIndex = 1; 
Switch1.slider( "refresh" ); 

» 

</script> 
</div> 


执行 后 的 初始 效果 如 图 18-22 所 示 。 单 击 某 个 按钮 后 会 执行 对 应 的 操作 效果 ， 例 如 单 击 “ 创 建 开 
关 1” 按 钮 后 会 创建 一 个 如 图 18-23 所 示 的 开关 控件 。 


创建 开关 1 i 


j 


创建 开关 2 


图 18-22 初始 效果 图 18-23 ”创建 一 个 开关 控件 


18.8 使 用 本 地 表单 元 素 
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在 移动 Web 应 用 中 , jQuery Mobile 能 够 自动 增强 页 面 内 的 所 有 表单 元 素 。 然 而 , 如 果 想 回 退 到 (fall 
backto) 本 地 控件 ， 则 可 以 在 全 局 或 者 字段 级 别 上 进行 配置 。 

为 了 分 别 设置 表单 字段 ， 以 显示 其 本 地 控件 ， 可 以 为 其 元 素 添加 data-role="none" 属 性 。 另 外 一 种 
方法 是 ,在 mobileinit 事件 初始 化 时 ， 通 过 设置 keepNative 选择 器 ， 以 全 局 方式 配置 应 该 以 本 地 方式 呈 
现 的 表单 元 素 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 本 地 表单 元 素 的 方法 。 


C 实例 18-15: 在 Android 中 使 用 本 地 表单 元 素 
e 源码 路 径 : Jti codes 18 native.html 


第 18 章 表单 


«div data-role-"page" data-theme="b"> 
<div data-role-"header"» 
<h1> 使 用 本 地 元 素 </h1> 
</div> 
<div data-role="content"> 
«form id="test" id="test" action="#" method="post"> 
<p> 
<label for="name"> 
输入 文本 : 
</label> 
«input type-"text" name-"name" id="name" value="" data-role-"none" /> 
«Ip» 
«p» 
«label for-"slider2"» 
反 转 开关 : 
</label> 
«select name-"slider2" id-"slider2" data-role="none"> 
«option value="off >Off</option> 
<option value="on">On</option> 
</select> 
«Ip» 
<p> 
<label for="slider"> 
滑动 条 : 
</label> 
«input type-"range" name-"slider" id="slider value="0" min="0" max="100" data-role="none" /> 
«Ip» 
<p> 
<label for="select-choice-1" class="select"> 
Select: 
</label> 
«select name-"genre" id-"genre" data-native-menu="false" data-theme="a" data-role="none"> 
«option value="null" data-placeholder="true">Select one...</option> 
<option value="action">Action</option> 
«option value="comedy">Comedy</option> 
<option value="drama">Drama</option> 
«option value="romance">Romance</option> 
</select> 
«Ip» 
<p> 
<input type="checkbox" name="genre" id-"c2" data-role="none" /> 
<label for="c2" data-theme="c"> 
复 选 框 : 
</label> 
«Ip» 
«p» 
«input type="radio" name-"map" id-"map1" value-"Map" checked-"checked" data-role-"none" /> 
<label for-"c2" data-theme-"c"^ 
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单 选 按钮 : 
</label> 
</fieldset> 
«Ip» 
<p> 
<label for="textarea"> 
文本 域 : 
</label> 
<textarea cols="40" rows="5" name="textarea" id="textarea" placeholder="Native" data-role="none"> 
</textarea> 
«Ip» 
<p> 
<button data-role="none"> 
Button 
</button> 
«Ip» 
«Iform» 
</div> 
</div> 


在 上 述 实例 代码 中 对 选择 器 进行 了 配置 ， 使 其 能 够 在 本 地 外 观 中 显示 所 有 的 input 和 select 元 素 。 
执行 后 的 效果 如 图 18-24 所 示 。 


输入 文本 : 
| 


BRS: (on|v] 


滑动 条 : 

Select: Select one... [w] 
复 选 框 : 

单 选 按钮 : © 


文本 域 : 


图 18-24 执行 效果 


在 HIML 5 中 提供 了 多 个 新 的 输入 类 型 ， 以 帮助 收集 数据 和 时 间 输 入 。 其 中 常用 的 有 time、date、 
month, week. datetime 和 datetime-local 输入 类 型 ， 是 否 支持 这 些 新 的 HTML 5 输入 类 型 ， 则 取决 于 用 


户 所 使 用 的 浏览 器 〈 见 http//www.quirksmode.org/htmlS/inputs.tmD) 。 支 持 这 些 特性 的 较 新 的 浏览 器 能 
够 显示 有 用 的 日 期 选择 器 ， 而 不 支持 这 些 特 性 的 浏览 器 则 会 回 退 到 文本 输入 。 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 HTML 5 的 时 间 、 日 期 类 型 的 方法 。 


e. 


C 实例 18-16: E Android 中 使 用 HTML 5 的 时 间 、 日 期 类 型 
源码 路 径 : 光盘 :\codes\18\dates html 


实例 文件 dates.html 的 具体 实现 代码 如 下 。 


«div data-role="page"> 
<div data-role="header"> 
<h1>HTML5 的 Dates</h1> 
</div> 


<div data-role="content"> 
<form id="test" id="test" action="#" method="post"> 


<label for="time"> 时 间 :</label> 

«input type-"time" name="time" id="time"/> 
«label for="dt"> 当 地 时 间 :</label> 

«input type-"datetime-local" name="dtl" id-"dtl" /> 


«label for="date"> 日 期 :</label> 
«input type-"date" name="date" id-"date" /> 


«label for-"month"» BH :«/label» 
«input type-"month" name-"month" id-"month" /> 


«label for-"week"» [8]: «/label» 
«input type-"week" name-"week" id-"week" /> 


«label for="dt"> 时 间 :</label> 
«input type-"datetime" name="dt" id="dt" /> 
</form> 
</div> 
</div> 


执行 后 的 效果 如 图 18-25 所 示 。 


HTML5 的 Dates 


时 间 : 


当地 时 间 : 


18-25 ”执行 效果 
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189 ”使 用 Mobiscroll 日 期 选择 器 


P) 
GR 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 18 章 \ 使 用 Mobiscroll 日 期 选择 器 .avi 
在 jQuery Mobile 应 用 中 ，Mobiscroll 是 一 个 优化 的 日 期 选择 器 。Mobiscroll API 是 可 以 配置 的 ， 允 
许 显示 多 个 日 期 和 时 间 的 组 合 。 并 且 Mobiscroll 可 以 进行 自 定义 操作 ， 以 显示 任何 需要 的 数据 。 例 如 
可 以 更 新 Mobiscroll 的 选项 ， 以 创建 一 个 自 定义 的 电影 搜索 列表 。 另 外 ，Mobiscroll 插件 也 是 一 个 非常 
灵活 的 控件 ， 可 以 用 于 许多 不 同 的 使 用 案例 。 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 Mobiscroll 日 期 选择 器 的 方法 。 


实例 18-17: 在 Android 中 使 用 Mobiscroll 日 期 选择 器 
源码 路 径 : 光盘 :\codes\18\mobiscrollhtml 


实例 文件 mobiscroll.html 的 具体 实现 代码 如 下 。 


<head> 
«meta name="viewport" content-"width-device-width, minimum-scale-1.0, maximum-scale-1.0;"» 
«meta name-"HandheldFriendly" content-"true" /> 
«title» MobiScroll Date Picker</title> 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«script src-"http;//code.jquery.com/jquery-1.6.4.min.js"» «/script 
«script src-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"»«/script" 
«script type-"text/javascript" src-"jquery.scroller-1.0.2.js"» «/script» 
«link rel="stylesheet" type="text/css" href-"jquery.scroller-1.0.2.css" /> 


«script type-"text/javascript"» 
S$(document).ready(function () ( 
$( "#date1" ).scroller(); 
$(" #date2" ).scroller({ preset: 'time' }); 
$( "#date3" ).scroller({ preset: 'datetime', 
seconds: true, 
ampm : false, 
dateOrder: 'dMyy', 
theme: 'sense-ui" 


» 


wheels = []; 
wheels[0] = { 'Hours': 0 }; 
wheels[1] = ( 'Minutes* () ): 
for (var i = 0; i < 60; i++) ( 
if (i < 16) wheels{0]['Hours']fi] = (i < 10) ? (0' + i) : i; 
wheels[1]['Minutes?][i] = (i < 10) ? (0' + i) : i; 


$( "custom" ).scroller(( 
width: 90, 
wheels: wheels, 
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formatResult: function (d){ 

return ((d[0] - 0) + ((d[1] - 0) / 60)).toFixed(1); 
) 
parseValue: function (s) ( 

var d = s.split("."); 

d[0] = d[0] - 0; 

d[1] = d[1] ? (((0.' + d[1]) - 0) * 60) : 0; 

return d; 


y 
$( "#custom-movie" ).scroller(( 
setText: 'Search', 
theme: 'sense-ui', 
wheels: [( 
"Rating: ( 18-star *****', '4-star*: '****', '3-star': "*** }, 
"Genre" ( 'action': 'Action', 'comedy': 'Comedy', 'drama': 'Drama' }, 
"Screen": ( '3d': '3D', 'imax": 'IMAX', wide: "Wide' } 
b 
» 


$(" #get" ).click(function() ( 
alert($(sdate2").scroller('getDate")); 
return false; 


» 


$("#set" ).click(function() { 
$('#date2').scroller('setDate', new Date(), true); 
return false; 
» 
» 
</script> 


<body> 
«div data-role="page" data-theme="b"> 
<div data-role="header" data-theme="a"> 
<h1> 使 用 Mobiscroll</h1> 
</div> 


<div data-role-"content" data-theme="d"> 
<form id="testform"> 
<p> 
<label for="date1">Date</label> 
«input type="text" name="date1" id="date1" class-"genField textEntry date" readonly= 
"readonly" value-"1/01/2012" /> 
«Ip» 
<p> 
<label for="date2">Time</label> 
<input type="text" name="date2" id="date2" class="genField textEntry date" value= 
"11:22 AM" /> 
«Ip» 
qe 
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<label for-"date3"»Datetime«/label- 
«input type="text" name-"date3" id-"date3" class-"genField textEntry date" /> 
«Ip» 
<p> 
<label for="custom-movie">Movie</label> 
<input type="text" name-"custom-movie" id-"custom-movie" class-"genField textEntry" 


value=" /> 
«Ip» 
<p> 
<label for="custom">Custom</label> 
<input type="text" name-"custom" id="custom" class-"genField textEntry date" value=" /> 
«Ip» 
</form> 
</div> 
</div> 


执行 后 会 显示 输入 时 间 表单 ， 当 单 击 文本 框 时 会 自动 弹出 一 个 选择 器 ， 如 图 18-26 所 示 。 
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图 18-26 执行 效果 
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在 Web 应 用 中 , 列表 是 一 种 广 受 欢 迎 的 用 户 界面 组 件 , 能 够 为 用 户 提供 简单 而 且 有 效 的 浏览 体验 。 
列表 也 是 一 种 能 够 以 多 种 方式 进行 设计 的 灵活 组 件 ， 能 够 很 好 地 适应 不 同 的 屏幕 尺寸 。 无 论 是 浏览 邮 
件 、 通 讯 录 、 音 乐 ， 还 是 查看 设置 ， 这 些 应 用 程序 都 以 一 种 略微 不 同 的 样式 风格 来 显示 一 系列 信息 。 
本 章 将 详细 讲解 在 jQuery Mobile 中 设计 和 配置 列表 的 知识 ,为 读者 步 入 本 书后 面 知识 的 学 习 打 下 基础 。 


19.1 列表 基础 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 19 章 \ 列 表 基 础 .avi 

在 jQuery Mobile 应 用 中 ， 列 表 的 实现 代码 其 实 是 一 个 含有 data-role="listview" 属 性 的 无 序列 表 ul。 
jQuery Mobile 会 把 所 有 必要 的 样式 应 用 在 列表 上 , 使 其 成 为 易于 触摸 的 控件 。 当 单 击 列表 项 时 , jQuery 
Mobile 会 触发 该 列表 项 中 的 第 一 个 链接 ， 通 过 Ajax 请 求 链接 的 URL 地 址 ， 在 DOM 中 创建 一 个 新 的 
页 面 并 产生 页 面 转 场 效 果 。 

当 为 列表 元 素 添加 了 data-role="list" 属 性 之 后 ，jQuery Mobile 能 够 将 任何 本 地 HTML 列表 (<ul> 
或 <ol>) 自动 增强 为 一 个 优化 的 移动 视图 。 在 默认 情况 下 ， 在 显示 增强 后 的 列表 时 会 占据 整个 屏幕 。 
如 果 列 表 条 目 包 含 链接 ， 则 会 以 容易 触摸 的 按钮 方式 来 显示 ， 而 且 会 带 有 一 个 右 对 齐 的 箭头 图 标 。 列 
表 会 使 用 调 色 板 颜色 c RE) 来 样式 化 。 要 想 应 用 其 他 主题 ， 需 要 为 列表 元 素 或 列表 条 目 〈<li> ) s 
加 data-theme 属性 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 列表 的 方法 。 


区 实例 19-1: 在 Android 中 使 用 列表 
` 源码 路 径 : Jti codes 19 basic.html 


实例 文件 basic.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Lists</title> 
«meta name-'"viewport" content-"width-device-width, minimum-scale=1.0, maximum-scale=1.0"> 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«script src-"http://code.jquery.com/jquery-1.19.4.min.js"» «/script» 
«script src-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"»«/script» 
</head> 
<body> 
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«div data-role="page"> 
«div data-role="header"> 
<h1> 使 用 列表 </h1> 
</div> 


<div data-role="content"> 
«ul data-role-"listview" data-theme="c"> 
<li><a href="#'>AAA</a></li> 


<li><a href="#'>BBB</a></li> 
<li><a href="#">CCC</a></li> 
<li><a href="#">DDD</a></li> 
<li><a href="#">EEE</a></li> 
<li><a href="#">FFF</a></li> 
<li><a href="#">GGG</a></li> 
<li><a href="#">HHH</a></li> 
<li><a href="#">lllll</a></li> 
«Iul» 
</div> 

</div> 

</body> 

</html> 


在 上 述 实例 代码 中 ， 使 用 <ul> 和 <li> 标 记 简 单 实现 了 一 个 列表 效果 。 执 行 后 的 效果 如 图 19-1 所 示 。 


使 用 列表 
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图 19-1 执行 效果 
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C 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 19 章 \ 内 置 列表 .avi 

在 jQuery Mobile 应 用 中 ， 显 示 内 置 列表 (inset list) 时 不 会 占据 整个 屏幕 。 相 反 ， 会 自动 存在 于 
带 有 圆 角 的 区 域 块 内 部 ， 而 且 具 有 额外 空间 的 边 距 设置 。 要 想 在 jQuery Mobile 应 用 中 创建 一 个 内 置 列 
表 ， 需 要 为 列表 元 素 添加 data-inset="true" 属 性 。 


356 


第 19 章 


如 果 列 表 需 要 嵌入 在 有 其 他 内 容 的 页 面 中 ， 内 谋 列 表 会 将 列表 设置 为 边缘 圆 角 ， 并 在 周围 留 有 magin 
的 块 级 元 素 。 给 列表 Cul ol) 添加 data-inset="true" 属 性 即 可 。 例 如 下 面 的 代码 : 
«ul data-role-"listview" data-filter-"true" > 
<li><a href-"index.html"»Inbox«/a»«/li» 
<li><a href-"index.html"»Outbox«/a» «/li» 
«Iul» 


上 述 代码 的 执行 效果 如 图 19-2 所 示 。 


Inbox "Oo 


Outbox 0 


图 19-2 ARRIR 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 内 置 列 表 的 方法 。 


实例 19-2: 在 Android 中 使 用 内 置 列 表 
源码 路 径 : 光盘 :\codes\19\inset.html 


实例 文件 inset.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" data-add-back-btn="true"> 
«div data-role-"header"» 
<h1> 联 系 亲 们 </h1> 
</div> 


<div data-role="content"> 
<ul data-role-"listview" data-inset="true"> 
<li data-role="list-divider"> 选 择 联系 方式 </li> 
<li><a href="#"><img src="images/75-phone.png" alt="Call" class="ui-li-icon"> 电 话 </a></li> 
<li><a href="#"><img src="images/18-envelope.png" alt="Email" class="ui-li-icon"> 邮 件 </a></li> 
<li><a href="#"><img src="images/09-chat-2.png" alt="SMS" class="ui-li-icon"> 短 信 </a></li> 
<li><a href="#"><img src="images/103-map.png" alt="Directions" class="ui-li-icon"> 腹 语 术 </a></li> 
«Iul» 
</div> 
</div> 


上 述 代码 的 执行 效果 如 图 19-3 所 示 。 
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GH 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 19 章 \ 列 表 分 割 线 .avi 

在 jQuery Mobile 应 用 中 ， 列 表 分 割 线 (list divider) 可 以 实现 一 组 列表 条 目的 页 眉 效果 。 为 了 创建 
列表 分 割 线 ， 需 要 为 任何 列表 条 目 添加 如 下 所 示 的 属性 。 

data-role= "list-divider" 


这 样 列表 分 割 线 的 默认 文本 在 显示 时 是 左 对 齐 的 。 
列表 项 也 可 以 转化 为 列表 分 割 项 ， 用 来 组 织 列表 ， 使 列表 项 成 组 。 给 任意 列表 项 添加 data-role= 
"list-divider” 属 性 即 可 。 在 默认 情况 下 ， 列 表 项 的 主题 样式 为 bp， 表示 浅 灰 ,但 是 给 列表 (ul 或 ol) Ws 
加 data-divider-theme 属性 后 ， 可 以 设置 列表 分 割 项 的 主题 样式 。 
在 默认 情况 下 ， 列 表 分 割 线 使 用 调 色 板 颜色 b ( 浅 蓝 色 ) 进行 样式 化 。 要 应 用 其 他 主题 ， 则 需要 为 
列表 元 素 添 加 data-divider-theme= "a" 属 性 。 
例如 下 面 的 代码 : 
<ul data-role-"listview"» 
<li data-rolez"list-divider"»A«/li» 
<li><a href-"index.html"» Adam Kinkaid«/a» «/li» 
<li><a href-"index.html"»Alex Wickerham«/a» «/li» 
<li><a hrefz"index.html"»Avery Johnson</a></li> 
<li data-role="list-divider">B</li> 
<li><a href="index.html">Bob Cabot</a></li> 


</ul> 
上 述 代码 的 效果 如 图 19-4 所 示 。 
| 一 
Adam Kinkaid o 
Alex Wickerham o 
Avery Johnson o 
Bob Cabot © 


19-4 效果 图 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲解 在 Android 中 使 用 列表 分 割 线 的 方法 。 


区 实例 19-3: 在 Android 中 使 用 列表 分 割 线 
源码 路 径 : 光盘 :\codes\19\dividers html 


实例 文件 dividers.html 的 具体 实现 代码 如 下 。 


<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 


#198 列表 


.segmented-control { text-align:center;) 
.segmented-control .ui-controlgroup ( margin: 0.2em; } 
-ui-control-active, .ui-control-inactive ( border-style: solid; border-color: gray; } 
-ui-control-active ( background: &BBB; } 
-ui-control-inactive ( background: #DDD; } 
</style> 
«script src="http://code.jquery.com/jquery-1.19.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role="page"> 
«div data-role="header"> 
<h1> 宝 贵 的 时 间 啊 </h1> 
</div> 


«div data-role="content"> 
«ul data-role-"listview" data-filter-"true" data-divider-theme="b"> 
<li data-role-"list-divider"»/8 — 
<p class-"ui-li-aside"»«strong»Feb 6 2012«/strong»«/p» «/li» 
<li><a href="#"> 
<p><strong> 上 午 6 点 </strong><span class-"ui-li-aside"» «strong» &: A R &</strong></span> 


«Ip» «/a»«lli» 
<li data-role="list-divider"> 周 二 
<p class="ui-li-aside"><strong>Feb 8 2012</strong></p></li> 
<li><a href="#"> 
<p><strong> 上 午 6 点 </strong><span class="ui-i-aside"><strong> F & «/strong» «/span» «/p» 
</a></li> 
<li data-role="list-divider"> 周 三 
«p class="ui-li-aside"><strong>Feb 10 2012</strong></p></li> 
<li><a href="#"> 
«p»«strong».E^r 8 点 </strong><span class-"ui-li-aside"» «strong» £4 & Æ </strong></span> 
«Ip» «/a» «lli» 
<li><a href="#"> 
<p><strong> 下 午 5 点 </strong><span class-"ui-li-aside"» «strong» Æ £R «/strong» «/span» «/p» 
</a>< 川 > 
«Iul» 
</div> 


<l-- Toolbar with a segmented control — 
«div data-role-"footer" data-position-"fixed" data-theme-"d" class-"segmented-control"» 
«div data-role-"controlgroup" data-type-"horizontal"» 
«a href="#" data-role-"button" class-"ui-control-active"»List«/a» 
«a href="#" data-role-"button" class-"ui-control-inactive"»Day«/a» 
«a href="#" data-role-"button" class-"ui-control-inactive"» Month «/a» 
</div> 
</div> 
</div> 


上 述 代码 的 执行 效果 如 图 19-5 所 示 。 
在 图 19-5 所 示 的 执行 效果 中 ， 列 表 条 目 同 时 包含 左 对 齐 和 右 对 齐 的 文本 。 要 让 文本 以 右 对 齐 方式 
放置 ， 需 要 使 用 一 个 包含 类 ui-li-aside 的 元 素 对 其 进行 包装 。 
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图 19-5 执行 效果 


19.4. 带 有 缩 略 图 和 图 标的 列表 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 19 章 \ 带 有 缩 了 略图 和 图 标的 列表 .avi 

在 jQuery Mobile 应 用 中 ， 要 想 在 列表 项 左 侧 添加 缩 略 图 ， 只 需 在 列表 项 中 添加 一 幅 图 片 作为 第 一 
个 子 元 素 即 可 , jQuery Mobile 会 自动 缩放 图 片 为 大 小 80px 的 正方 形 。 如 果 想 使 用 16x16 标准 的 图 标 作 
为 缩 略图 ， 只 需 为 图 片 元 素 添加 ui-li-icon class 即 可 。 例 如 下 面 的 代码 。 


<ul data-role-"listview"» 
<li> 
<img src="images/album-bb.jpg" /> 
<h3><a href="index.html">Broken Bells</a></h3> 
<p>Broken Bells</p> 
«lli» 
<li> 
«img src-"images/album-hc.jpg" /> 
«h3»«a href-"index.html"» Warning«/a» «/h3» 
<p>Hot Chip</p> 
«lli» 
«Iul» 


上 述 代码 的 效果 如 图 19-6 所 示 。 
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下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 实现 缩 略 图 列表 效果 的 方法 。 


实例 19-4: 在 Android 中 实现 缩 略 图 列表 效果 
源码 路 径 : 光盘 :\codes\19\suolue.html 


实例 文件 suolue.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 
«meta charset="utf-8"> 
<title>List Example</title> 
«meta name-"viewport" content-"width-device-width, initial-scale=1"> 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.O/jquery.mobile-1.0.min.css" /> 
«style» 

-tabbar .ui-btn .ui-btn-inner ( font-size: 11pxlimportant; padding-top: 24pxlimportant; padding-bottom: 
Opxlimportant; } 

-tabbar .ui-btn .ui-icon ( width: 30pxlimportant; height: 20pxlimportant; margin-left: -15pxlimportant; 
box-shadow: nonelimportant; -moz-box-shadow: nonelimportant; -webkit-box-shadow:  nonelimportant; 
-webkit-border-radius: none limportant; border-radius: none important; ) 

#home .ui-icon ( background:  url(. /images/53-house-w.png) 5096 5096 no-repeat; background-size: 
22px 20px; ) 

#movies .ui-icon ( background: url(./images/107-widescreen-w.png) 5096 5096 no-repeat; background- 
size: 25px 17px; } 

sitheatres .ui-icon ( background:  url(. /images/15-tags-w.png) 5096 5096 no-repeat; background-size: 
20px 20px; ) 


.segmented-control ( text-align:center;) 
.segmented-control .ui-controlgroup ( margin: 0.2em; } 
.ui-control-active, .ui-control-inactive ( border-style: solid; border-color: gray; ) 
.ui-control-active ( background: #BBB; ) 
.ui-control-inactive ( background: DDD; } 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role="page"> 
<div data-role="header" data-theme="b" data-position="fixed"> 
<div class="segmented-control ui-bar-d"> 
«div data-role-"controlgroup" data-type="horizontal"> 
«a href="#" data-role-"button" class-"ui-control-active"» 8 Bl «/a» 
«a href="#" data-role-"button" class-"ui-control-inactive" 73] «/a^ 
«a href="#" data-role-"button" class-"ui-control-inactive"»/]v&à«/a» 
</div> 
</div> 
</div> 


<div data-role="content"> 
«ul data-role="listview"> 
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«li» 
«a href="#"> 
«img src-"images/111.jpg" /> 
<h3> 变 形 金刚 </h3> 
<p> 评 级 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 级 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
<la> 
«lli» 
<li> 
<a href="#"> 
<img src-"images/333 jpg" /> 
<h3> 雷 雨 </h3> 
<p> 评 级 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
<la> 
«lli» 
<li> 
<a href="#"> 
<img src-"images/444 jpg" /> 
<h3> 小 李 飞 刀 </h3> 
<p> 评 级 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
«lli» 
<li> 
<a href="#"> 
<img src="images/111.jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 级 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
<la> 
«lli» 
«Jul» 
</div> 


<l- tab bar with custom icons —> 
«div data-role-"footer" class-"tabbar" data-position-"fixed" 
«div data-role-"navbar" class-"tabbar"^ 
«ul» 
<li><a href="#" id-"home" data-icon-"custom"» 3: 7 «/a» «/li» 
<li><a href="#" id-"movies" data-icon-"custom" class-"ui-btn-active"»Movies«/a»-/li» 
<li><a href="#" id-"theatres" data-icon-"custom"» & k «/a» «/li» 
<lul> 
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</div> 
</div> 
</div> 


上 述 实 例 代码 的 执行 效果 如 图 19-7 所 示 。 


1 
3 


图 19-7 执行 效果 
另外 ， 也 可 以 使 用 更 小 的 图 标 来 取代 缩 略 图 。 要 在 列表 条 目 中 使 用 16x16px 的 图 标 ， 需 要 为 图 像 
元 素 添 加 ui-li-icon 类 。 
下 面 通 过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 实现 带 有 图 标的 列表 效果 的 方法 。 


实例 19-5: 在 Android 中 实现 带 有 图 标的 列表 效果 
源码 路 径 : 光盘 :\codes\19\icons html 


实例 文件 icons.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" data-theme="b"> 
<div data-role-"header"» 
<h1> 评 论 </h1> 
«a href="#" data-icon-"plus" data-iconpos-"notext" class-"ui-btn-right"»«/a» 
</div> 


«div data-role="content > 
«ul data-role-"listview" data-inset-"true" data-theme="e"> 
<li data-role="list-divider"> 查 看 评论 </li> 
<li> 
«img src="images/111.jpg"> 
<h3> 变 形 金刚 </h3> 
<p><span class="uilirrating">90%</span><strong> 喜 欢 看 !</strong></p> 
<p> 评 论 数 : <em>1,588</em></p> 
«lli» 
«Jul» 
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«ul data-role-"listview" data-inset-"true" data-theme="d"> 
«li data-role="list-divider"> 用 户 评论 </li> 


«li» 
«a href="#"> 
«img src-"images/111-user.png" class-"ui-li-icon" 
<p><strong> 好 看 !</strong></p> 
<p> 真 精彩 ， 真 精彩 ! .</p> 
<la> 
«lli 
«li» 
«a href="#"> 
«img src-"images/111-user.png" class-"ui-li-icon" 
<p><strong> 快 来 看 !</strong></p> 
<p> 效 果 震 撼 ! </p> 
<la> 
«lli» 
<li> 
<a href="#"> 


<img src="images/111-user.png" class="ui-li-icon"> 
<p><strong> 快 看 吧 !</strong></p> 
<p> 主 角 很 美 ! .</p> 

<la> 
«lli» 

<li> 
<p><a hre 作 "六 > 查看 更 多 评论 ..</a></p> 
<p>1-3 of 15 total</p> 

«lli» 

«Iul» 
</div> 
</div> 


上 述 实例 代码 的 执行 效果 如 图 19-8 所 示 。 


用 户 评论 
SE! 

put © 
快 来 看 ! 

AL sse © 
tes 

A ssim © 

查看 更 多 评论 。 

1-3 of 15 total 


图 19-8 执行 效果 
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19.5 ”使 用 拆 分 按钮 列表 


Ra 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 19 章 \ 使 用 拆 分 按钮 列表 .avi 

在 jQuery Mobile 应 用 中 , 有 时 需要 让 每 个 列表 条 目 支持 多 个 动作 , 此 时 可 以 创建 具有 主 (primary) 
按钮 和 附属 Csecondary) 按钮 的 拆 分 按钮 列表 。 另 外 ， 有 时 每 个 列表 项 会 有 多 于 一 个 操作 ， 这 时 拆 分 
按钮 提供 了 如 下 两 个 独立 的 可 单 击 部 分 。 

EO ”列表 项 本 身 。 

回 ”列表 项 右边 的 icon. 

要 想 创建 这 种 拆 分 按钮 ， 只 需 在 <li> 插 入 第 二 个 链接 即 可 ， 此 时 框架 会 创建 一 个 竖 直 的 分 割 线 ,并 
把 链接 样式 化 为 一 个 只 有 icon 的 按钮 , 通过 设置 title 属性 可 以 保证 可 访问 性 。 设置 data-split-icon 属性 ， 
可 以 设置 位 于 右边 的 分 隔 项 的 图 标 ， 图 标 分 隔 项 的 主题 样式 可 以 通过 data-split-theme 属性 来 设置 。 

在 jQuery Mobile 应 用 中 ， 要 创建 一 个 拆 分 按钮 ， 需 要 在 列表 条 目 内 添加 一 个 附属 链接 ，jQuery 
Mobile 框架 会 添加 一 条 垂直 的 线 ， 以 分 割 主动 作 和 附属 动作 。 如 果 要 为 所 有 的 附属 按钮 设置 图 标 ， 则 
需要 为 列表 元 素 添 加 data-split-icon 属性 ， 并 将 其 值 设置 为 标准 的 或 自 定义 的 图 标 。 默 认 情况 下 ， 附 属 
按钮 使 用 调 色 板 颜色 b ( 浅 蓝 色 ) 进行 样式 化 处 理 。 要 想 应 用 其 他 主题 ,可 以 为 列表 元 素 添加 data-split- 
theme 属性 。 例 如 下 面 的 代码 。 

«ul data-role-"listview" data-split-icon-"gear" data-split-theme="d"> 

<li> 

<img src="images/album-bb.jpg" /> 

<h3><a href="index.html">Broken Bells</a></h3> 

<p>Broken Bells</p> 

«a href-"lists-split-purchase.html" data-rel-"dialog" data-transition="slideup">Purchase album</a> 
«lli» 
d 

«img src-"images/album-hc.jpg" /> 

«h3»«a href-"index.html"» Warning«/a» «/h3» 


<p>Hot Chip</p> 
«a href-"lists-split-purchase.html" data-rel-"dialog" data-transition-"slideup"»Purchase album</a> 
«lli» 
«Iul» 


上 述 代码 的 执行 效果 如 图 19-9 所 示 。 


Broken Bells 
Broken Bells 


Warning © 
Hot Chip. 


图 19-9 执行 效果 
例如 在 如 下 所 示 的 实例 中 ， 可 以 修改 最 初 的 电影 列表 实例 ， 使 其 支持 多 个 动作 。 主 按钮 会 继续 显 
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示 电 影 详情 ， 而 新 的 附属 按钮 可 以 用 来 购买 电影 票 。 


实例 文件 split.html 的 具体 实现 代码 如 下 。 


«div data-role="page"> 
«div data-role-"header" data-theme-"b" data-position="fixed"> 
<div class-"segmented-control ui-bar-d"> 
<div data-role="controlgroup" data-type="horizontal"> 
<a href="#" data-role="button" class="ui-control-active"> 电 影 </a> 
«a href="#" data-role-"button" class="ui-control-inactive"> 人 金曲 </a> 
«a href="#" data-role-"button" class="ui-control-inactive"> 连 续 剧 </a> 
</div> 
</div> 
</div> 


<div data-role="content"> 
<ul data-role-"listview" data-split-icon="star" data-split-theme="d"> 
<li> 
<a href="#"> 
«img src="images/111.jpg" /> 
<h3> 变 形 金刚 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
<a href="##'> 购 票 </a> 
«lli» 
<li> 
<a href="#"> 
«img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
<la> 
<a href="#'> 购 票 </a> 
«lli» 
<li> 
<a href="#"> 
<img src-"images/333 jpg" /> 
<h3> 雷 雨 </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
<la> 
<a href- </a> 
«lli» 
<li> 
<a href="#"> 
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«img src-"images/444 jpg" /> 
<h3> 小 李 飞 刀 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
<a href="#"> 购 票 </a> 
«lli 
«li» 
«a href="#"> 
«img src-"images/111.jpg" /> 
<h3> 变 形 金 刚 3D</h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 131 min.</p> 


<la> 
<a href="#'> 购 票 </a> 
«lli» 
«Iul» 
</div> 


<l- tab bar with custom icons --> 
«div data-role-"footer" class-"tabbar" data-position-"fixed" 
«div data-role-"navbar" class-"tabbar"» 
«ul» 
<li><a href="#" id-"home" data-icon-"custom"» £ 9i «/a» «/li» 
<li><a href="#" id-"movies" data-icon-"custom" class-"ui-btn-active"»Movies«/a» «/li» 
<li><a href="#" id-"theatres" data-icon-"custom"» Eie «/a» «/li» 
«Iul» 
</div> 
</div> 
</div> 


上 述 实例 代码 的 执行 效果 如 图 19-10 所 示 。 
[um $i X4 


变形 金刚 
评论 :PG o 


时 长 : 95 min. 


X 战 警 
评论 :PG-13 o 
时 长 -137 min 


时 长 : 131min 


图 19-10 ”执行 效果 


(0 Android 移动 网 站 开发 详解 


19.6 使 用 编号 列表 


GH 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 19 章 \ 使 用 编号 列表 .avi 

在 jQuery Mobile 应 用 中 ， 在 使 用 有 序列 表 (<ol>) 时 需要 创建 编号 列表 (numbered list) 。 在 默 
认 情 况 下 ，jQuery Mobile 会 在 每 一 个 列表 条 目的 左边 添加 数字 索引 。 通 过 有 序列 表 ol 可 以 创建 数字 排 
序 的 列表 , 表现 顺序 序列 , 例如 电影 排行 榜 。 当 应 用 列表 时 用 到 增强 效果 , jQuery Mobile 优先 使 用 CSS 
的 方式 给 列表 添加 编号 ， 当 浏览 器 不 支持 这 种 方式 时 ， 框 架 会 采用 JavaScript 将 编号 写 入 列表 中 。 例 如 
下 面 的 代码 。 

«ol data-role-"listview"» 

<li><a href-"index.html"» The Godfather«/a» «/li» 


<li><a href-"index.html"»Inception«/a» «/li» 
<li><a href -"index.html"» The Good.The Bad and the Vgly</a></li> 


<lol> 

上 述 代 码 的 执行 效果 如 图 19-11 所 示 。 
1. The Godfather o 
2 Inception © 
3. The Good, the Bad and the Ugly o 


图 19-11 执行 效果 
AAE: 详细 讲解 在 Android 中 使 用 编号 列表 的 方法 。 


实例 文件 numbered.html 的 具体 实现 代码 如 下 。 


«div data-role="page"> 
«div data-role-"header" data-theme-"b" data-position="fixed"> 
«div class-"segmented-control ui-bar-d"» 
«div data-role-"controlgroup" data-type-"horizontal" 
«a href="#" data-role-"button" class-"ui-control-inactive"» 8418 «/a» 
«a href="#" data-role-"button" class="ui-control-inactive"> 电 视 剧 </a> 
«a href="#" data-role-"button" class="ui-control-active"> 音 乐 </a> 
</div> 
</div> 
</div> 


«div data-role="content"> 
«ol data-role="listview"> 
<li><a href="#">AAA</a></li> 
<li><a href="#">BBB</a></li> 
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<li><a href="#">CCC</a></li> 
<li><a href="#">DDD</a></li> 
<li><a href="#">EEE</a></li> 
<li><a href="#">FFF</a></li> 
<li><a href="#">GGG</a></li> 
<li><a href="#">HHH</a></li> 
<li><a href="#">llllll </a></li> 
<lol> 
</div> 


<l- tab bar with custom icons 一 > 
«div data-role-"footer" class-"tabbar" data-position-"fixed"» 
«div data-role-"navbar" class-"tabbar"» 
«ul» 
<li><a href="#" id-"home" data-icon-"custom"» £ 71 </a></li> 
<li><a href="#" id="movies" data-icon-"custom" class="ui-btn-active">Movies</a></li> 
<li><a href="#" id="theatres" data-icon="custom"> 评 论 </a></li> 
«Iul» 
</div> 
</div> 
</div> 


上 述 代码 的 执行 效果 如 图 19-12 所 示 。 
[zm | 电视 剧 | o) 


1. AAA 


2 BBB 


3. CCC 


4 DDD 


5. EEE 


6. FFF 


7. GGG 


8. HHH 


000000000 


3 MMN 


Eri 


图 19-12 执行 效果 


19.7 使 用 只 读 列表 


GR 知识 点 讲解 : 光盘 \ 视 频 讲解 第 19 章 \ 使 用 只 读 列表 .avi 


在 jQuery Mobile 应 用 中 ， 在 列表 视图 中 可 以 显示 只 读 的 数据 视图 ， 而 且 用 户 界面 看 起 来 与 前 面 出 


现 的 交互 式 界面 非常 相似 ， 只 不 过 纯 图 标的 右 箭头 图 像 被 移 除 。 由 此 可 见 ， 列 表 也 可 以 用 来 展示 没有 
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有 链接 即 可 ，jQuery Mobile 默认 将 它们 的 主题 样式 设置 为 c (白色 无 渐变 色 ) ， 并 把 字号 设 为 比 可 单 
击 的 列表 项 小 以 节省 空间 。 例 如 下 面 的 代码 。 
«ul data-role-"listview" data-inset="true"> 
«li» Acura«/li» 
«li» Audi«/li» 
«Jul» 


上 述 代码 的 执行 效果 如 图 19-13 所 示 。 


Acura 


Audi 


19-13 ”执行 效果 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 带 有 只 读 条 目的 列表 的 方法 。 


实例 文件 readonly.html 的 具体 实现 代码 如 下 。 


<div data-role="page"> 
«div data-role="header data-theme-"b" data-position="fixed"> 
<div class="segmented-control ui-bar-d"> 
«div data-role-"controlgroup" data-type="horizontal"> 
«a href="#" data-role-"button" class="ui-control-active"> 电 影 </a> 
«a href="#" data-role-"button" class-"ui-control-inactive"» & £k «/a» 
«a href="#" data-role-"button" class="ui-control-inactive"> 舞 蹈 </a> 
</div> 
</div> 
</div> 


«div data-role="content"> 
<ul data-role="listview"> 
<li> 
<img src="images/111.jpg" /> 
<h3> 变 形 金 刚 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
«lli» 
<li> 
<img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
«lli» 
<li> 
<img src="images/333.jpg" /> 
<h3> 雷 雨 </h3> 
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<p> 评 论 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
«lli 
<li> 
<img src-"images/444 jpg" /> 
<h3> 小 李 飞 刀 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
«lli» 
«li» 
«img src-"images/222 jpg" /> 
<h3>X 战 警 3D</h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
«lli» 
«Iul» 
</div> 


<l- tab bar with custom icons --> 
«div data-role-"footer" class-"tabbar" data-position-"fixed" 
«div data-role-"navbar" class-"tabbar"» 
«ul» 
<li><a href="#" id-"home" data-icon-"custom"» 3: 91 «/a» «/li» 
<li><a href="#" id-"movies" data-icon-"custom" class-"ui-btn-active"»Movies«/a»«/li» 
<li><a href="#" id-"theatres" data-icon-"custom"» Eie «/a» «/li» 
«Iul» 
</div> 
</div> 
</div> 


上 述 实例 代码 的 执行 效果 如 图 19-14 所 示 。 


| as |s) 


变形 金刚 
评论 : PG 
时 长 :95 min 


xiki 
评论 :PG-13 
时 长 : 137 min. 


mm 
评论 :PG-13 
时 长 :131 min 


ME 
评论 :PG 
时 长 -95 min. 


X 战 警 3D 
评论 :PG-13 
时 长 131 min. 


图 19-14 执行 效果 
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19.8 使 用 列表 徽章 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 19 章 \ 使 用 列表 微 章 .avi 

在 jQuery Mobile 应 用 中 , 支持 通过 HTML 语义 化 的 标签 来 显示 列表 项 中 所 需 常见 的 文本 格式 , 例 
如 标题 、 描 述 、 二 级 信息 、 计 数 等 。 具 体 说 明 如 下 。 

回 “ 将 数字 用 一 个 元 素 包 庄 ， 并 添加 ui-li-count 的 class， 放 置 于 列表 项 内 ， 可 以 给 列表 项 右 侧 增 

加 一 个 计数 泡 。 

回 ”要 添加 有 层次 关系 的 文本 可 以 使 用 标题 来 强调 ， 用 段落 文本 来 减少 强调 。 

加 ”补充 信息 (如 日 期 ) 可 以 通过 包 庄 在 class="ui-li-aside" 的 容器 中 来 添加 到 列表 项 的 右 侧 。 

例如 下 面 的 代码 。 


«ul data-role= "listview"> 
«li data-role-"list-divider"»Friday, October 8, 2010 «span class="ui-li-count">2</span></li> 
<li> 
<h3><a href="index.html">Stephen Weber</a></h3> 
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p> 
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the Jquery team.</p> 
<p class="ui-li-aside"><strong>6:24</strong>PM</p> 
«lli» 
<li> 
<h3><a href="index.html">Jquery Team</a></h3> 
<p><strong>Boston Conference Planning</strong></p> 
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and 
speakers.«/p» 
«p class-"ui-li-aside"» «strong» 9:18«/strong»AM«/p» 
«lli» 
«Iul» 


上 述 代码 的 执行 效果 如 图 19-15 所 示 。 


Friday, October 8, 2010 [:] 


Stephen Weber 6:24PM 

You've been invited to a meeting at Filament Group in Boston, MA o 
Hey Stephen, if youre available at 10am tomorrow, weve got a meeting with the jO. 

jQuery Team 9:18AM 

Boston Conference Planning o 


In preparation for the upcoming conference in Boston, we need to start gathering 


19-15 ”执行 效果 


在 jQuery Mobile 应 用 中 ,列表 徽章 (list badge) 或 计数 泡 (count bubble) 是 一 个 突出 显示 的 椭圆 ， 
通常 用 来 表示 有 多 少 个 新 的 条 目 可 供 查看 。 例 如 ， 通 常 在 邮件 应 用 程序 中 使 用 徽章 来 指示 用 户 有 多 少 
封 未 读 邮 件 。 

要 在 jQuery Mobile 应 用 中 创建 一 个 徽章 ， 需 要 使 用 一 个 包含 ui-li-count 类 的 元 素 对 徽章 中 的 文本 
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进行 包装 。 默 认 情况 下 ， 征 章 使 用 调 色 板 颜色 c (灰色 ) 来 样式 化 。 要 应 用 其 他 主题 ， 可 以 为 列表 元 素 
添加 data-count-theme 属性 。 

例如 在 下 面 的 实例 中 ， 征 章 用 来 指示 在 几 天 前 添加 的 某 个 电影 的 评论 ， 可 以 用 来 表达 任何 类 型 的 
元 数据 。 


实例 文件 badges.html 的 具体 实现 代码 如 下 。 


«div data-role="page"> 
<div data-role="header"> 
<h1> 电 影评 论 </h1> 
</div> 


<div data-role="content"> 
«ul data-role-"listview" data-inset-"true" data-theme="e"> 
<li data-role-"list-divider"» X-& $F 
«p class-"ui-li-aside"» Eie S: «em» 1,588«/em» «/p»«/li» 
<li> 
<img src-"images/thumbs-up.png" class="ui-li-icon"> 
<p> 快 来 看 吧 ， 非 常 好 看 ， 效 果 好 ! </p> 
«lli» 
«Iul» 


«ul data-role-"listview" data-inset-"true" data-theme-"e" data-count-theme-"e"» 
<li data-role-"list-divider"» P325 «/li» 
<li> 
<img src="images/111-user.png" class="ui-li-icon"> 
<p> 好 的 ， 我 马上 去 看 看 ! .</p> 
«span class="ui-l-count">1 天 前 </span> 
«lli» 
<li> 
<img src="images/111-user.png" class="ui-li-icon"> 
<p> 票 好 买 吗 ， 我 怕 排 队 ! !</p> 
«span class="ui-li-count">3 天 前 </span> 
«lli» 
«Jul» 
</div> 


<l-- toolbar with icons 一 > 
«div data-role-"footer" data-position-"fixed"^ 
«div data-role-"navbar"^ 
«ul» 
<li><a href="#" data-icon-"arrow-I"»«/a» «/li» 
<li><a href="#" data-icon-"back"» «/a» «/li» 
<li><a href="#" data-icon-"star"»«/a» «/li» 
<li><a href="#" data-icon-" plus" «/a» «/li» 
<li><a href="#" data-icon-"arrow-r"»«/a» «/li» 
<lul> 
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</div> 
</div> 
</div> 
上 述 实例 代码 的 执行 效果 如 图 19-16 所 示 。 


电影 评论 


, RREE, EENE, ARF! 


| 好 的 ,我 马上 去 看 看 4 


RERS, RIGH | 
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19-16 执行 效果 


19.9 使 用 搜索 栏 过 滤 列 表 


Gau 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 19 章 \ 使 用 搜索 栏 过 滤 列 表 .avi 
在 jQuery Mobile 应 用 中 ， 存 在 一 个 过 滤 列 表 的 客户 端 搜索 特性 。 要 想 创建 一 个 搜索 栏 ， 需 要 为 列 
表 添 加 data-filter="true" 属 性 。jQuery Mobile 框架 会 在 列表 的 上 方 添加 一 个 搜索 过 滤器 ， 而 且 其 默认 的 
占 位 符 文本 会 显示 “Filter items..." o 
在 jQuery Mobile 应 用 中 ， 有 如 下 所 示 的 两 种 方法 可 以 用 于 配置 占 位 符 文本 。 
CD 通过 为 列表 元 素 添加 data-filter-placeholder 属性 ， 可 以 配置 占 位 符 文本 。 
(2) 通过 绑 定 mobileinit 事件 ， 并 将 filterPlaceholder 选项 设置 为 任何 自 定义 的 占 位 符 的 值 ， 可 以 
以 全 局 方式 将 占 位 符 的 文本 设置 为 jQuery Mobile 的 配置 选项 。 即 : 
$ (document).bind('mobileinit ' function()( 
$.mobile.listview.prototype.options.filterPlaceholder-"Search.."; 
i 


搜索 输入 框 默认 的 字符 为 “Filter items... ", 通过 设置 mobileinit 事件 的 绑 定 程序 、 给 $.mobile.listview. 
prototype.options.filterPlaceholder 选项 设置 一 个 字符 串 , 或 者 给 列表 设置 data-filter-placeholder 属性 ， 可 
以 设置 搜索 输入 框 的 默认 字符 。 例 如 : 


«ul data-role-"listview" data-filter="true" > 
<li><a href-"index.html"»Acura«/a» «/li» 
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<li><a href="index.html">Audi</a></li> 
<li><a href="index.html">BMW</a></li> 
<lul> 


上 述 代码 的 执行 效果 如 图 19-17 所 示 。 


> 
È 
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图 19-17 执行 效果 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 搜索 过 滤 列表 的 方法 。 


C] 8/1940: 在 Android 中 使 用 搜索 过 滤 列表 s 
源码 路 径 : J6fb codes 19Milter.html 


实例 文件 filter.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>List Filter</title> 
«meta name="viewport" content="width=device-width, initial-scale=1"> 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1 .O/jquery.mobile-1.0.min.css" /> 
«style» 
.segmented-control { text-align:center;) 
.segmented-control .ui-controlgroup ( margin: 0.2em; ) 
.ui-control-active, .ui-control-inactive ( border-style: solid; border-color: gray; ) 
.ui-control-active ( background: 4BBB; ) 
.ui-control-inactive ( background: €DDD; } 
</style> 
«script src="http://code.jquery.com/jquery-1.19.4.min.js"></script> 
<script> 
S$(document).bind('mobileinit' function()( 
I/Globally configure search filter placeholder text 
II$.mobile.listview.prototype.options.filterPlaceholder = "Search me..."; 


I/Configure a "starts with" search instead of the default 
II$.mobile.listview.prototype.options.filterCallback = function( text, search Value )( 
IINew "Starts With" search, return false when there's a match 
IIreturn K(text.toLowerCase().indexOf( searchValue ) === 0); 
Iy, 
» 


/When the page loads configure a custom search 


n 
S$(scalendar-page").live("pagebeforeshow", function()( 
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</script> 


$("#calendar-list").listview('option', 'filterCallback', 


function( text, searchValue )( 
lINew "Starts With" search, return false when there's a match 
return K(text.toLowerCase().indexOf( search Value ) === 0); 


y 


«script src-"http://code.jquery.com/mobile/1 .O/jquery.mobile-1.0.min.js"» «/script^ 


</head> 
<body> 


<div data-role="page" id="calendar-page"> 
<div data-role="header"> 


<h1> 查 找 日 期 </h1> 
</div> 


<div data-role="content"> 


</a></li> 


</a></li> 


</div> 


«ul data-role-"listview" id="calendar-list" data-filter-"true" data-filter-placeholder="Search..."> 


<li data-role-"list-divider"»/8 — 
<p class-"ui-li-aside"»«strong»Feb 6 2012«/strong» «/p» «/li» 
<li><a href="#"> 
<p><strong>6:00</strong><span class="ui-li-aside"><strong> Œ A R & </strong></span></p> 


<li data-role-"list-divider"» [8 — 
<p class-"ui-li-aside"»«strong»Feb 8 2012«/strong» «/p» «/li» 
<li><a href="#"> 
<p><strong>8:00</strong><span class-"ui-li-aside" «strong» MÆ «/strong» «/span?«/p» «/a» «/li» 
<li data-role-"list-divider"»/8 — 
«p class-"ui-li-aside"»«strong»Feb 10 2012«/strong» «/p» «/li» 
<li><a href="#"> 
<p><strong>14:00</strong><span class-"ui-li-aside"» «strong» ri «/strong» «/span» «/p» «/a» «/li» 
<li><a href="#"> 
<p><strong>18:00</strong><span class="ui-li-aside"><strong> 看 球赛 !</strong></span></p> 


«I—- Toolbar with a segmented control —> 
«div data-role-"footer" data-position-"fixed" data-theme-"d" class-"segmented-control"» 


</div> 


</body> 
</html> 
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«div data-role-"controlgroup" data-type="horizontal"> 


«a href="#" data-role-"button" class-"ui-control-active"»List«/a» 
«a href="#" data-role-"button" class-"ui-control-inactive"» Day«/a» 
«a href="#" data-role-"button" class-"ui-control-inactive"»Month«/a» 


</div> 
</div> 


so: xu NN 


上 述 实例 代码 的 初始 执行 效果 如 图 19-18 所 示 。 当 开始 在 搜索 过 滤器 中 输入 文本 时 ， 客 户 端的 过 
滤器 会 只 显示 与 通配符 搜索 相 匹配 的 条 目 。 例 如 输入 “看 ”后 ， 会 自动 显示 有 “看 ” 字 的 活动 安排 “看 
球赛 ”， 如 图 19-19 所 示 。 


Searc 
$00 £HR& 

z o) 
14:00 mo 周三 Feb 10 2012 
18:00 mxo Seed LLL] 

[ bist | Day | Month | (ow | Month 
图 19-18 初始 执行 效果 图 19-19 过 滤 后 的 效果 


在 jQuery Mobile 应 用 中 ， 如 果 需 要 更 改 默认 的 搜索 函数 ， 有 如 下 两 种 方法 可 以 重 写 用 于 过 滤 的 
callback (ENH) 函数 。 
(1) 通过 绑 定 mobileinit 事件 ， 并 将 filterCallback 选项 设置 为 任何 自 定义 的 搜索 函数 ， 从 而 以 全 
局 方式 将 搜索 函数 更 新 为 jQuery Mobile 的 配置 选项 。 例 如 ， 这 里 对 callback 函数 进行 设置 ， 使 其 使 用 
一 个 starts with 搜索 。 即 : 
$(document).bind('mobileinit',function(X{ 
$.mobile.listview.prototype.options.filterCallback- 
function( text, searchValue)( 
return!(text.toLowerCase().indexOf(searchValue)---0); 
B 
P: 
函数 callback 提供 了 两 个 参数 : text 和 searchValue， 上 有 具体 说 明 如 下 。 
E] text 包含 列表 条 目的 文本 。 
B] searchValue: 包含 搜索 过 滤器 的 值 。 
用 于 通配符 搜索 的 默认 行为 以 如 下 方式 进行 编码 实现 。 
return text.toLowerCase().indexOf(searchValue)--- 


如 果 函 数 callback 针对 某 个 列表 条 目 返回 了 一 个 真 Crue). 值 ， 则 该 列表 条 目 不 会 在 搜索 结果 中 显 
示 《〈 即 该 列表 条 目 与 搜索 的 内 容 不 匹配 ) 。 
(20 在 创建 列表 之 后 可 以 动态 地 配置 搜索 函数 。 例 如 在 载 入 页 面 之 后 ， 可 以 为 某 个 特定 的 列表 应 


用 新 的 搜索 行为 。 
9 
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$("#calendar-list"). 1istview('option','filterCallback’, 
function( text, searchValue)( 
return K(text.toLowerCase().indexOf( search Value)---0); 


! 
); 
在 默认 情况 下 , 搜索 框 会 继承 其 父 容器 的 主题 .要 配置 其 他 主题 , 则 需要 为 列表 元 素 添加 data-filter- 
theme 属性 。 


19.10 “实现 动态 列表 效果 


£a 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 19 章 \ 实 现 动态 列表 效果 .avi 

在 jQuery Mobile 应 用 中 ，listview 插件 是 一 个 能 自动 增强 列表 的 微 件 。 我 们 可 以 使 用 该 插件 来 动 
态 创建 、 更 新 列表 。 有 两 种 方法 可 以 用 来 创建 动态 列表 : 一 是 通过 标记 驱动 的 方法 动态 创建 列表 ， 二 
是 通过 显 式 设置 listview 插件 选项 的 方式 来 动态 创建 列表 。 


19.10.1 列表 选项 


在 jQuery Mobile 应 用 中 ，listview 拥有 如 下 所 示 的 选项 。 
(D countTheme， 是 一 个 字符 串 ， 默 认为 co 
设置 列表 项 的 “计数 泡 ” 的 主题 样式 。 接 受 a 一 z 的 字母 的 主题 样式 。 如 果 想 给 项 目 所 有 的 listview 
统一 设置 主题 样式 。 需 要 给 mobileinit event 绑 定 设置 。 例 如 : 
$( document ).bind( "mobileinit", function()( 
$.mobile.listview.prototype.options.countTheme = "a"; 
六 


也 可 以 通过 data-count-theme="a" 的 属性 来 单独 设置 。 
(2) dividerTheme， 是 一 个 字符 串 ， 默 认为 b。 
设置 列表 分 割 项 的 主题 样式 。 接 受 az 的 字母 的 主题 样式 。 如 果 想 给 项 目 所 有 的 列表 分 割 项 统一 
设置 主题 样式 。 需 要 给 mobileinit event 绑 定 设置 。 例 如 : 
$( document ).bind( "mobileinit", function()( 
$.mobile.listview.prototype.options.dividerTheme = "a"; 
» 
也 可 以 通过 data-divider-theme="a" 的 属性 来 单独 设置 。 
(3) filter， 是 一 个 布尔 值 ， 默 认为 false。 
给 列表 添加 搜索 过 滤 框 。 如 果 想 给 项 目 所 有 的 搜索 过 滤 框 统一 的 设置 ， 需 要 给 mobileinit event 绑 
定 设置 。 例 如 : 


$( document ).bind( "mobileinit", function(X{ 
$.mobile.listview.prototype.options.filter = true; 


» 
也 可 以 通过 data-filter="true" 的 属性 来 单独 设置 。 


e. 


第 19 章 » 


(4) filterCallback， 是 一 个 function 过 程 。 

该 搜索 过 滤 的 回调 函数 用 来 设置 当 搜索 过 滤 条 件 中 输入 的 文字 发 生 改变 时 ， 列 表 中 的 哪些 列表 项 
隐藏 。 该 函数 接受 两 个 参数 : 列表 项 中 的 文字 和 搜索 的 字符 串 。 返 回 trae 则 隐藏 这 些 列表 项 , 返回 false 
则 不 隐藏 。 如 果 想 给 项 目 所 有 的 搜索 过 滤 框 统一 的 设置 ， 需 要 给 mobileinit event 绑 定 设置 。 例 如 : 

$( document ).bind( "mobileinit", function(X{ 

$.mobile.listview.prototype.options.filterCallback = function( text, search Value ) ( 
// 只 显示 已 搜索 字符 串 开头 的 列表 项 
return text.toLowerCase().substring( 0, searchValue.length ) !== searchValue; 
E 


» 


(5) fterPlaceholder， 是 一 个 字符 串 ， 默 认为 "Filter items...". 

Placeholder 是 HTML 5 新 加 入 的 input 的 属性 ， 为 输入 框 的 文字 占 位 符 ， 作 用 等 同 于 默认 的 value, 
在 输入 自己 的 文字 时 会 消失 ， 删 掉 自己 输入 的 文字 时 会 自动 出 现 ， 也 不 会 随 着 按钮 默认 的 提交 。 设 置 
搜索 输入 框 的 Placeholder， 如 果 想 给 项 目 所 有 的 搜索 过 滤 框 统一 的 设置 ， 需 要 给 mobileinit event 绑 定 
设置 。 例 如 : 

$( document ).bind( "mobileinit", function()( 

$.mobile.listview.prototype.options.filterPlaceholder = "Search..."; 
D: 


也 可 以 通过 data-filter-placeholder="Search.…" 的 属性 来 单独 设置 。 
(6) filterTheme， 是 一 个 字符 串 ， 默 认为 co 
设置 列表 项 的 搜索 输入 框 的 主题 样式 。 接 受 az 的 字母 的 主题 样式 。 如 果 想 给 项 目 所 有 的 搜索 输 
入 框 统一 设置 主题 样式 。 需 要 给 mobileinit event 绑 定 设置 。 例 如 : 
$( document ).bind( "mobileinit", function()( 
$.mobile.listview.prototype.options.filterTheme = "a"; 
六 


也 可 以 通过 data-filter-theme="a" 的 属性 来 单独 设置 。 
(7) headerTheme， 是 一 个 字符 串 ， 默 认为 b。 
设置 檬 套 的 列表 项 的 子 页 面 的 header 主题 样式 。 接 受 a 一 z 的 字母 表示 的 主题 样式 。 如 果 想 将 项 目 
所 有 的 搜索 输入 框 统 一 设置 主题 样式 ， 需 要 给 mobileinit event 绑 定 设 置 。 例 如 : 
$( document ).bind( "mobileinit", function()( 
$.mobile.listview.prototype.options.headerTheme - "a"; 
» 


也 可 以 通过 data-header-theme="a" 的 属性 来 单独 设置 。 
(8) initSelector， 是 一 个 CSS 选择 器 字符 串 ， 默 认为 :iqmData(role='listview')。 
被 CSS 选择 器 选择 的 容器 会 被 自动 初始 化 为 listview。 想 改变 自动 初始 化 为 list 的 dom， 可 以 给 
mobileinit event 绑 定 设置 。 例 如 : 
$( document ).bind( "mobileinit", function()( 
$.mobile.listview.prototype.options.initSelector = ".mylistview"; 
» 
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(9) inset， 是 一 个 布尔 值 ， 默 认为 false。 
将 列表 设置 为 内 嵌 的 形式 。 如 果 想 将 项 目 所 有 的 列表 统一 设置 为 是 否 为 内 柑 ， 需 要 给 mobileinit 
event 绑 定 设置 。 例 如 : 
$( document ).bind( "mobileinit", function()( 
$.mobile.listview.prototype.options.inset = true; 
» 


也 可 以 通过 data-inset="true" 的 属性 来 单独 设置 。 
(10) splitIcon， 是 一 个 字符 串 ， 默 认为 arrow-r。 
设置 所 有 拆 分 按钮 的 图 标 。 如 果 想 给 项 目 所 有 拆 分 的 按钮 的 图 标 统一 设置 主题 样式 ， 需 要 给 
mobileinit event 绑 定 设置 。 例 如 : 
$( document ).bind( "mobileinit", function()( 
$.mobile.listview.prototype.options.splitlcon = "star"; 
D: 


也 可 以 通过 data-split-icon="star" 的 属性 来 单独 设置 。 
(11) splitTheme， 是 一 个 字符 串 ， 默 认为 b。 
设置 所 有 拆 分 按钮 的 主题 样式 。 接 受 az 的 字母 的 主题 样式 。 如 果 想 给 项 目 所 有 拆 分 按钮 统一 设 
置 主题 样式 。 需 要 给 mobileinit event 绑 定 设置 。 例 如 : 


$( document ).bind( "mobileinit", function(}{ 
$.mobile.listview.prototype.options.splitTheme = "a"; 


» 


也 可 以 通过 data-split-theme="a" 的 属性 来 单独 设置 。 
(12) theme， 是 一 个 字符 串 ， 默 认为 null， 继 承 父 容器 。 
设置 所 有 的 listview 的 主题 样式 。 接 受 az 的 字母 的 主题 样式 。 默 认 情 况 下 ， 会 继承 父 容器 的 主 
题 样式 的 设置 , 如 果 想 给 项 目 所 有 listview 统一 设置 主题 样式 , 需要 给 mobileinit event 绑 定 设置 。 例如: 
$( document ).bind( "mobileinit", function()( 
$.mobile.listview.prototype.options.theme = "a"; 
六 


也 可 以 通过 data-theme="a" 的 属性 来 单独 设置 。 
19.10.2 ”列表 方法 


TE jQuery Mobile 应 用 中 ，listview 拥有 如 下 所 示 的 方法 。 

1. childPages 

功能 是 取得 列表 的 子 页面 ， 此 方法 返回 一 个 jQuery 对 象 ， 为 嵌 套 页 面 的 子 页 面 。 例 如 : 
$(.selector)listview(childPages'; 

2. refresh 


功能 是 刷新 listview。 如 果 用 JS 手动 修改 了 一 个 listview， 必 须 调用 refresh 方法 刷新 listview 的 外 


e. 


be na 000 


观 。 例 如 : 


$('.selector').listview('refresh'); 


19.10.3 ”列表 事件 


在 jQuery Mobile 应 用 中 ， 可 以 给 OL 元 素 或 者 ul 元 素 直接 绑 定 事件 ， 可 以 使 用 jQuery Mobile 的 
虚拟 事件 ， 或 者 绑 定 JavaScript 的 标准 事件 ， 例 如 change. focus, blur 等 。 例 如 : 


$( "selector" ).bind( "change", function(event, ui) ( 


» 
listview 拥有 自 定义 事件 create， 当 listview 被 创建 时 触发 。 例 如 : 


$( "selector" ).listview({ 
create: function(event, ui) ( ... ) 


» 
下 面 通 过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲解 在 Android 中 创建 动态 列表 的 方法 。 


实例 文件 dynamic.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" data-theme="b"> 
«div data-role-"header"» 
<h1> 创 建 动态 列表 </h1> 
</div> 


<div data-role="content"> 
<a href="#" id="create-list1" data-role="button"> 创 建 列表 1</a> 
«a href="#" id="create-list2" data-role="button"> 创 建 列表 2</a> 
<br> 
«a href="#" id-"update-list1" data-role="button" data-theme="a"> 更 新 列表 1</a> 
</div> 
«script type-"text/javascript"» 
$( "#create-list1" ).bind( "click", function() { 
$( '«ul data-inset-"true" id="list1"><li data-role-"list-divider"»Genres«/li»«li»«a href="#">Action 
*Ja»«lli» «li» «a href="#">Comedy</a></li></ul>' ) 
nsertAfter( "#create-list1" ) 
.listview(); 
D 


$( "#create-list2" ) bind( "click", function() { 
$( '«ul»«li data-role-"list-divider'»Genres«/li»«li»«a href="#">Action</a></li><li><a href="#"> 
Comedy</a></li></ul>' ) 
nsertAfter( "#create-list2" ) 
listview( 
theme: "d", 
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dividerTheme: "a", 
inset: true, 
create: function(event) ( 
console.log( "Creating list..." ); 
for (prop in event) ( 
console.log(prop + ' = ' + event[prop]); 
} 


» 
D: 
$( "#update-list1" ).bind( "click", function() { 
$("#list1" ) 
.append('<li><a href="#">Drama</a></li>') 
istview('refresh"); 
» 


</script> 
«[div» 


执行 后 的 初始 效果 如 图 19-20 所 示 。 单 击 某 个 按钮 后 会 自动 创建 一 个 列表 , 例如 单 击 “ 创 建 列 表 1" 


按钮 后 会 创建 一 个 如 图 19-21 所 示 的 新 列表 。 


Genres 


创建 动态 列表 


创建 列表 1 ome D 
创建 列表 2 创建 列表 2 


图 19-20 初始 效果 图 19-21 自动 创建 一 个 新 列表 


Action 


第 20 章 ”内容 格式 化 


jQuery Mobile 页 面 的 内 容 是 完全 开放 的 ， 但 是 jQuery Mobile 框架 提供 了 一 些 有 用 的 工具 及 组 件 ， 
如 可 折 革 的 面板 、 多 列 网 格 布局 等 。 通 过 这 些 工具 和 组 件 可 以 方便 地 为 移动 设备 格式 化 指定 的 内 容 。 
本 章 将 详细 讲解 在 jQuery Mobile 中 使 用 表格 和 CSS 格式 化 内 容 的 知识 , 为 读者 学 习 本 书后 面 的 知识 打 
下 基础 。 


20.1 使 用 基本 的 HTML 样式 


GA 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 20 章 \ 使 用 基本 的 HTML 样式 .avi 

在 jQuery Mobile 应 用 中 ， 可 以 很 方便 地 通过 默认 方法 给 指定 的 内 容 添 加 样式 。 我 们 的 目标 是 让 浏 
览 器 的 默认 泻 染 优先 进行 , 然后 加 入 一 点 padding 让 页 面 看 起 来 更 有 可 读 性 , 再 应 用 主题 样式 系统 来 分 
配 字体 和 颜色 。 

在 移动 Web 应 用 设计 中 ， 默 认 的 HTML 标记 样式 是 Default HTML markup styling。 默 认 情 况 下 ， 
jQuery Mobile 的 主题 样式 为 标准 的 HTML. 元 素 使 用 标准 的 HTML 样式 和 字号 ， 如 header. p. block 
quotos、a、ul、ol、dl 和 dt。 


202 使 用 表格 进行 布局 


GB 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 20 章 \ 使 用 表格 进行 布局 .avi 
在 移动 Web 应 用 中 ， 因 为 移动 设备 屏幕 通常 都 比较 窗 ， 所 以 不 推荐 在 移动 设备 上 使 用 多 栏 布局 的 
方法 。 但 有 时 会 想 要 把 一 些小 的 元 素 ( 如 按钮 、 导 航标 签 等 ) 并 排放 置 ，jQuery Mobile 框架 提供 了 一 
种 简单 的 方法 构建 基于 CSS 的 分 栏 布局 ， 叫 做 ui-grid。 

jQuery Mobile 提供 了 两 种 预 设 的 配置 布局 ,分 别 是 两 列 布局 (class 含有 ui-grid-a) 和 三 列 布局 Cclass 
含有 ui-grid-b) ， 通 过 这 两 种 布局 方式 几乎 可 满足 需要 列 布局 的 任何 情况 。 

jQuery Mobile 的 表格 是 可 配置 的 ， 可 以 支持 2—5 列 的 表格 布局 。 从 HTML 的 角度 来 看 ， 表 格 是 
使 用 CSS 属性 配置 的 div 元 素 ， 相 当 灵 活 ， 而 且 会 占据 显示 屏幕 的 整个 宽度 。 表 格 不 包含 边界 、 内 间 
距 、 边 距 ， 这 样 就 不 会 影响 其 内 部 元 素 的 样式 。 在 查看 示例 之 前 ， 首 先 来 讲解 标准 的 表格 模板 。 


20.2.1 表格 模板 


在 jQuery Mobile 应 用 中 创建 多 列表 格 时 ， 需 要 创建 具有 两 个 或 更 多 个 内 层 块 (inner block) 的 外 
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层 表 格 容器 。 具 体 说 明 如 下 。 
(1) 表格 容器 (grid container) 
表格 容器 需要 CSS 属性 ui-grid-* 来 配置 表格 中 列 的 数量 ， 如 表 20-1 所 示 。 例 如， 要 创建 一 个 两 列 
的 表格 ， 需 要 将 表格 CSS 属性 设置 为 ui-grid-a。 


表 20-1 表格 CSS 属性 说 明 


(2) 块 (block) 
块 包含 在 表格 内 ， 需 要 CSS 属性 ui-block-* 来 识别 其 列 的 位 置 ， 如 表 20-2 所 示 。 例 如 ， 有 一 个 两 
列 的 表格 ， 则 第 一 个 块 会 用 CSS 属性 ui-block-a 来 样式 化 ， 而 第 二 个 块 会 用 CSS 属性 ui-block-b 来 样 


式 化 。 
表 20-2 $k CSS 属性 说 明 
列 的 数量 表格 CSS 属性 列 的 数量 表格 CSS 属性 
1 ui-block-a ui-block-d 
2 | wbo | s | ui-block-e 
3 | cwbekc | | 
20.2.2 ”两 列表 格 


在 jQuery Mobile 应 用 中 ， 要 构建 两 栏 的 布局 (50/50%) ， 需 要 先 构建 一 个 父 容器 ， 添 加 一 个 名 为 
ui-grid-a 的 class， 内 部 设置 两 个 子 容器 ， 分 别 给 第 一 个 子 容器 添加 class:ui-block-a， 第 二 个 子 容器 添加 
class:ui-block-b。 例 如 : 

<div class="ui-grid-a"> 

«div class="ui-block-a"><strong>l'm Block A«/strong» and text inside will wrap</div> 
«div class-"ui-block-b"»«strong»l'm Block B«/strong» and text inside will wrap</div> 
<ldiv><!-- /grid-a —> 

上 述 代码 的 执行 效果 如 图 20-1 所 示 。 


I'm Block A and text inside will I'm Block B and text inside will 
wrap. wrap. 


20-1 执行 效果 


图 20-1 所 示 的 执行 效果 ， 默 认 的 两 栏 没有 样式 ， 并 行 排列 。 分 栏 的 class 可 以 应 用 到 任何 类 型 的 
容器 上 。 而 在 图 20-2 所 示 的 效果 中 ， 给 表单 的 fieldset 添加 class="ui-grid-a"， 然 后 给 两 个 button 所 在 
的 子 容器 添加 属性 class="ui-block-a" 和 class="ui-block-b"， 设 置 使 两 个 容器 各 自 占 50% 的 宽 。 


图 20-2 效果 图 
在 图 20-3 所 示 的 区 块 中 增加 了 两 个 class， 增 加 ui-bar 的 class 给 默认 的 bar padding， 增 加 ui-bar-e 


e. 
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的 class 应 用 背景 渐变 以 及 工具 栏 的 主题 e 的 字体 样式 ， 然 后 在 每 个 网 格 的 标签 内 增加 style="height: 
120px" 的 属性 来 设置 高 度 。 


区 实例 20-1: 在 Android 中 使 用 两 列表 格 
源码 路 径 : 光盘 :\codes\20\2colhtml 


实例 文件 2colLhtml 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
«title» Grid Example</title> 
«I—-«meta namez"viewport" content-"width-device-width, initial-scale21"»—» 
<meta name-"viewport" content-"width-device-width, maximum-scale-1"» 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«script src-"http://code.jquery.com/jquery-1.6.4.min.js"» «/script" 
«script src-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"» «/script^ 
</head> 
<body> 


<div data-role="page" id="home"> 
<div data-role="header"> 
<h1> 两 列 的 表格 </h1> 
</div> 


<div data-role="content" > 
<div class="ui-grid-a"> 
«div class-"ui-block-a"»«strong»3& A</strong><br>The text will wrap within the grid.</div> 
«div class-"ui-block-b"»«strong»3& B«/strong» «br» More text.</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


在 上 述 实例 代码 中 ， 外 层 表 格 (outer grid) 使 用 CSS 表格 属性 ui-grid-a 进行 配置 。 然 后 添加 了 两 
个 内 层 块 ， 第 一 个 块 被 分 配 了 一 个 CSS 属性 ui-block-a， 第 二 个 块 被 分 配 了 一 个 CSS 属性 ui-block-b。 
执行 效果 如 图 20-4 所 示 。 列 是 等 间距 、 无 边界 的 ， 而 且 每 个 块 内 的 文本 在 必要 时 会 换行 显示 。 作 为 一 
个 额外 的 优点 ，jQuery Mobile 内 的 表格 相当 灵活 ， 而 且 会 根据 不 同 的 屏幕 显示 尺寸 以 自 适 应 的 方式 进 


行 呈 现 。 
KI 
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The text will wrap within the grid More text 


图 20-4 执行 效果 
202.3 三 列表 格 


在 jQuery Mobile 应 用 中 ， 另 一 种 常用 的 布局 方式 是 三 栏 布 局 ， 给 父 容器 添加 class="ui-grid-b"， 然 
后 分 别 给 3 个 子 容 器 添加 class="ui-block-a"、class="ui-block-b" 和 class="ui-block-c"。 例 如 : 


«div class-"ui-grid-b"» 
«div class-"ui-block-a"»Block A</div> 
«div class-"ui-block-b"»Block B</div> 
«div class-"ui-block-c"»Block C</div> 
</div><!— /grid-a — 


上 述 代码 运行 后 会 生成 一 个 33/33/3396 的 分 栏 布局 ， 如 图 20-5 所 示 。 
而 图 20-6 所 示 的 是 一 个 三 列 网 格 布局 示例 。 


20-5 ”执行 效果 20-6 三 列 网 格 布局 
一 个 三 列表 格 的 区 域 划分 比例 是 33%、33%、33%。 依 此 类 推 ， 如 果 是 四 栏 布局 ， 则 给 父 容器 添加 
class="ui-grid-c"， 即 两 栏 为 a， 三 栏 为 bp， 四 栏 为 ce， 五 栏 为 d H, eee ， 则 子 容器 分 别 添加 
class-"ui-block-a", class-"ui-block-b", class-"ui-block-c", ++ E 


下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 三 列表 格 的 方法 。 


实例 文件 3col.html 的 具体 实现 代码 如 下 。 


«div data-role="page" id="home"> 
<div data-role="header"> 
<h1> 使 用 三 列表 格 布局 </h1> 
</div> 


«div data-role="content"> 
<div class="ui-grid-b"> 
<div class="ui-block-a"> 
«div class="ui-bar ui-bar-e" style="height: 100px;">Block A</div> 
</div> 
«div class-"ui-block-b"» 
«div class-"ui-bar ui-bar-e" style-"height:100px;"» Block B</div> 
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</div> 
«div class="ui-block-c"> 
«div class="ui-bar ui-bar-e" style-"height:100px;"»Block C</div> 
</div> 
</div> 
</div> 

</div> 

上 述 实 例 代码 执行 后 的 效果 如 图 20-7 所 示 。 

由 此 可 见 ， 三 列表 格 与 前 面 介绍 的 两 列表 格 非常 相似 ， 但 是 
它 配 置 了 CSS 属性 Cui-grid-b) 以 支持 3 个 列 , 而 且 为 第 三 列 (ui- 
block-c) 添加 了 一 个 额外 的 块 。 另外， 还 使 用 可 主题 化 的 类 (可 
以 添加 到 包含 了 表格 的 任何 元 素 上 ) 对 块 进行 了 样式 化 。 在 上 述 » 
实例 中 ， 添 加 了 ui-bar 以 应 用 CSS 内 间距 ， 还 添加 了 ui-bar-e 以 B207 PARA 
便 为 e 工 具 栏 主题 调 色 板 应 用 背景 渐变 和 字体 样式 。 我 们 可 以 使 用 a~e 内 的 任何 工具 栏 主题 (ui-bar-*) 
来 样式 化 块 。 最 后 , 为 了 创建 一 致 的 块 高 度 ， 对 高 度 以 内 嵌 方 式 进行 了 样式 化 (style= "height:100px") 。 
从 视觉 上 看 ， 这 些 增强 都 是 使 用 线性 的 背景 渐变 来 样式 化 表格 ， 块 与 块 之 间 使 用 边界 进行 隔离 。 


20.2.4 $5 app 图 标的 四 列表 格 
在 jQuery Mobile 应 用 中 ， 一 个 四 列表 格 的 区 域 比例 是 25%、25%、25%、25%。 下 面 通过 一 个 具 
体 实 例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 四 列表 格 的 方法 。 


K 实例 20-3: 在 Android 中 使 用 四 列表 格 
源码 路 径 : 光盘 :\codes\20\4col.html 


实例 文件 Acol.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" id="home" data-theme="d"> 
<div data-role-"header" data-theme="a"> 
<h1> 使 用 四 列表 格 布局 </h1> 
</div> 


«div data-role="content"> 
«div class-"ui-grid-c" style="text-align: center;"> 
<div class="ui-block-a"> 
<img src="images/cloud-default.png" height="44" width="44"> 
</div> 
«div class-"ui-block-b"» 
«img src-"images/cloud-bright.png" height-"57" width="57"> 
</div> 
«div class="ui-block-c"> 
«img src-"images/cloud-ripple.png" height="57" width="57"> 
</div> 
«div class="ui-block-d"> 
«img src-"images/cloud-sparkle.png" height="57" width="57"> 
</div> 
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</div> 
</div> 
</div> 


上 述 实 例 代码 执行 后 的 效果 如 图 20-8 所 示 。 
由 此 可 见 ， 四 列表 格 与 三 列表 格 相似 ， 只 不 过 为 该 表格 配置 了 六 

CSS 属性 (ui-grid-c) ， 以 支持 4 个 列 ， 而 且 为 第 四 列 Cui-block-d) ar 
添加 了 一 个 额外 的 块 。 此 外 ， 出 于 平衡 和 一 致 性 考虑 ， 将 app 图 标 放 O O e du 
置 在 表格 的 中 央 位 置 (style="text-align:center;") 。 从 视觉 上 看 ， 这 四 d 

列表 格 都 具有 大 小 相等 的 app 图 标 。 图 20-8 执行 效果 


20.25 ”五 列表 格 


在 jQuery Mobile 应 用 中 ， 一 个 五 列表 格 的 布局 比例 为 20%、20%、20%、20%、20%。 下 面 通过 
一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 五 列表 格 的 方法 。 


K 实例 20-4: 在 Android 中 使 用 五 列表 格 
源码 路 径 : 光盘 :\codes\20\5colLhtml 


实例 文件 5col.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" id="home"> 
«div data-role-"header"» 
<h1> 使 用 五 列表 格 布局 </h1> 
</div> 


<div data-role="content"> 
«div class-"ui-grid-d" style="text-align: center;"» 
«div class-"ui-block-a"»&stxe21c;«/div» 
«div class-"ui-block-b"»&stxe21d;«/div» 
«div class-"ui-block-c"»&£xe21e;«/div» 
«div class-"ui-block-d"» &fxe21f, «/div» 
«div class="ui-block-e">&#xe220;</div> 
</div> 
</div> 
</div> 


通过 上 述 实例 代码 可 知 ， 五 列表 格 与 前 面 讲解 的 四 列表 格 非常 相似 ， 只 不 过 为 该 表格 配置 了 CSS 
属性 (ui-grid-d) 以 支持 5 个 列 ， 而 且 为 第 五 列 (ui-block-e) 添加 了 一 个 额外 的 块 ， 每 一 个 块 都 包含 独 
特 的 Emoji 图 标 。 


注意 : Emoji 图 标 目前 只 支持 iOS 系 统 。 
20.26 ”多 行 表格 


通过 前 面 的 学 习 可 知 ， 只 需 简 单 地 重复 第 一 行 的 块 模式 即 可 添加 表格 的 其 他 行 。 例 如 在 下 面 的 实 
例 中 ， 最 终生 成 了 一 个 3 行 5 列 的 表格 。 其 中 列 的 宽度 都 是 相等 的 ， 而 且 在 块 组 件 上 可 以 手动 调整 行 
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”实例 20-5: 在 Android 中 使 用 多 行 表格 
源码 路 径 : 光盘 :\codes\20multihtml 


实例 文件 multi.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" id="home"> 
«div data-role-"header"- 
<h1> 多 行 表格 </h1> 
</div> 


<div data-role="content"> 
«div class-"ui-grid-d" style="text-align: center"> 
<l- First row —> 
<div class-"ui-block-a"» «img src-"images/cloud-default.png" height-"44" width="44"></div> 
«div class-"ui-block-b"» «img src-"images/cloud-default.png" height-"44" width="44"></div> 
«div class-"ui-block-c"» «img src-"images/cloud-default.png" height-"44" width-"44"» «/div» 


«div class-"ui-block-d"» «img src-"images/cloud-default.png" height-"44" width="44"></div> 
«div class-"ui-block-e"» «img src-"images/cloud-default.png" height-"44" width-"44"» «/div» 


«I— Second row --> 

<div class-"ui-block-a"» «img src-"images/cloud-default.png" height-"44" width="44"></div> 
«div class-"ui-block-b"» «img src-"images/cloud-default.png" height-"44" width-"44"» «/div» 
«div class-"ui-block-c"» «img src-"images/cloud-default.png" height-"44" widthz"44"» «/div» 


«div class-"ui-block-d"» «img src-"images/cloud-default.png" height-"44" width-"44"» «/div» 
«div class-"ui-block-e"» «img src-"images/cloud-default.png" height-"44" width="44"></div> 


<l-- Third row --> 

«div class-"ui-block-a"» «img src-"images/cloud-default.png" height-"44" width="44"></div> 
«div class-"ui-block-b"» «img src-"images/cloud-default.png" height-"44" width="44"></div> 
«div class-"ui-block-c"» «img src-"images/cloud-default.png" height-"44" widthz"44"» «/div» 


«div class-"ui-block-d"» «img src-"images/cloud-default.png" height-"44" widthz"44"» «/div» 
«div class-"ui-block-e"» «img src-"images/cloud-default.png" height-"44" widthz"44"» «/div» 
</div> 
</div> 
</div> 


上 述 实 例 代码 执行 后 的 效果 如 图 20-9 所 示 。 
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20.2.7 不 规则 的 表格 


在 jQuery Mobile 应 用 中 ， 如 果 需 要 自 定义 列 的 尺寸 , 可 以 在 CSS 中 调整 其 宽度 。 例如， 通过 设置 
每 一 个 块 的 自 定 义 宽度 ， 可 以 将 两 列表 格 的 宽度 修改 为 一 个 25%:75% 的 表格 。 因 此 ， 可 以 修改 设计 的 
表格 ， 以 支持 各 种 尺寸 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲解 在 Android 中 使 用 不 规则 表格 的 方法 。 


区 实例 20-6: 在 Android 中 使 用 不 规则 表格 
源码 路 径 : 光盘 :\codes20Wneven html 


实例 文件 uneven.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
«title» Grid Example</title> 
«meta name-"viewport" content-"width-device-width, initial-scale-1"» 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1 .O/jquery.mobile-1.0.min.css" /> 
«style» 
/* Original 2-column grid set to 50/5096 
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b ( 
width: 5096; 
hu 


/* Set 2-column grid to 25/7596 */ 
.ui-grid-a .ui-block-a ( 


width: 2596; 

) 

.ui-grid-a .ui-block-b ( 
width: 7596; 

) 


[* Set 3-column grid to 25/50/2596 */ 
.ui-grid-b .ui-block-a ( 
width: 2596; 


.ui-grid-b .ui-block-b ( 
width: 5096; 
) 
.ui-grid-b .ui-block-c ( 
width: 2596; 
} 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 


e. 


«body» 


«div data-role-"page" id="home"> 
<div data-role-"header"^ 
<h1> 下 面 是 不 规则 的 表格 </h1> 


</div> 


«div data-role-"content" > 
«div class-"ui-grid-a"» 


<div class-"ui-block-a"» 

«div class-"ui-bar ui-bar-e" style-"text-align:center; height:100px;"»2596«/div» 
</div> 
<div class-"ui-block-b"» 

«div class-"ui-bar ui-bar-e" style-"text-align:center; height:100px;"»7596«/div» 
</div> 


</div> 
<div class="ui-grid-b"> 


<div class="ui-block-a"> 

<div class="ui-bar ui-bar-e" style-"text-align:center; height:100px;">25%</div> 
</div> 
<div class="ui-block-b"> 

<div class="ui-bar ui-bar-e" style-"text-align:center; height:100px;">50%</div> 
</div> 
«div class-"ui-block-c"» 

«div class-"ui-bar ui-bar-e" style-"text-align:center; height:100px;"»2596«/div» 
</div> 


</div> 


</div> 
</div> 
</body> 
</html> 


上 述 实例 代码 执行 后 的 效果 如 图 20-10 所 示 。 


图 20-10 执行 效果 


20.2.8 Springboard (苹果 iDevice 的 桌面 ) 


所 谓 Springboard, 通俗 来 讲 就 是 苹果 iDevice 的 桌面 , 属于 Dock 式 结构 。Springboard 包括 iDevice 
解锁 后 的 主 菜 单 界面 Spotlight 搜索 界面 ( 主 菜单 第 一 页 左 划 出 现 ) 和 多 任务 切换 菜单 ( 连 按 两 次 Home 
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键 之 后 出 现 ) ， 如 图 20-11 所 示 。 

Springboard 存在 于 iDevice 的 进程 中 ， 不 可 清除 ， 其 运行 原理 与 
Windows 中 的 explorer.exe 系统 进程 类 似 。 一 旦 Springboard 崩溃 , 改版 系 
统 用 户 可 以 用 安装 的 Substrate.Safemode 插件 进入 安全 模式 ， 否 则 会 一 直 
停留 在 开机 界面 〈 白 苹果 ) 或 者 关机 、 重 启 Springboard 界面 〈 白 菊花 ) 。 

截至 iPhone 5 发 布 , Springboard 仍然 是 唯一 一 个 不 能 通过 苹果 产品 自 
带 的 Home 键 和 电源 键 重启 的 系统 进程 ,只 有 改版 系统 用 户 才 可 以 使 用 插 
件 SBSettings 或 Activator 上 的 按钮 Respring 来 重启 。 

在 jQuery Mobile 应 用 中 , 通常 会 使 用 如 下 所 示 的 两 种 类 型 的 Springboard。 

回 (EM app 图 标 进 行 样式 化 的 Springboard。 

回 ”使 用 Glyphish 图 标 样式 化 的 Springboard. 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 app 
图 标 样式 化 方法 实现 一 个 Springboard 的 方法 。 


图 20-11 iPhone 的 
Springboard 效果 


«IDOCTYPE html» 
«html» 
<head> 
«meta charset="utf-8"> 
<title>Springboard Example</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/iquery.mobile-1.0.min.css" /> 
<style> 
/* center icons */ 
-ui-grid-a ( text-align: center; ) 


/* set row height */ 
-ui-block-a, .ui-block-b ( height: 100px; ) 


/* set label color, size */ 
.icon-label { color: #000; display: block; font-size:12px; ) 
a:link, a:visited, a:hover, a:active { text-decoration:none; } 


.background-gradient { 
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */ 
background-image: -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */ 


background-image: -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */ 
background-image: -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */ 
background-image: linear-gradient(top, #3c3c3c, #111); /* Standard, non-prefixed */ 
ii 
</style> 


«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
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</head> 
<body> 


<div data-role="page" id="home" data-theme="d" class="background-gradient"> 
<div data-role-"header" data-theme="b"> 
<h1> 用 app 图 标 样式 化 实现 Springboard</h1> 
</div> 


<div data-role="content"> 
<div class="ui-grid-a"> 
<div class="ui-block-a"> 
<a href="#"> 
«img src-"images/cloud-default.png" height="57" width="57"> 
<span class="icon-label">App AAA</span> 
<la> 
</div> 
«div class-"ui-block-b"» 
«a href="#"> 
«img src-"images/cloud-bright.png" height="57" width="57"> 
<span class-"icon-label"»App BBB</span> 
<la> 
</div> 
<div class-"ui-block-a"» 
<a href="#"> 
<img src="images/cloud-ripple.png" height="57" width="57"> 
<span class="icon-label">App CCC</span> 
<la> 
</div> 
«div class-"ui-block-b"» 
«a href="#"> 
«img src-"images/cloud-sparkle.png" height-"57" width="57"> 
«span class-"icon-label"»App DDD«/span» 
<la> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


上 述 实例 代码 执行 后 的 效果 如 图 20-12 所 示 。 


用 app 图 标 样式 化 实现 Springboard 


图 20-12 执行 效果 
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下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲解 在 Android 中 使 用 Glyphish 图 标 样式 化 方法 实现 一 
个 Springboard 的 方法 。 

E 实例 20-8: 使 用 Glyphish 图 标 样式 化 方法 实现 一 个 Springbomd 

加 源码 路 径 : 光盘 :\codes\20\springboard2.html 


实例 文件 springboard2.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 
«meta charset-"utf-8"» 
<title>jMovies</title> 
<meta name="viewport" content-"width-device-width, initial-scale=1"> 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
/* center icons */ 
.ui-grid-a ( text-align: center; ) 


[* set row height */ 
.ui-block-a, .ui-block-b ( height: 100px; position: relative; ) 


/* set label size and color */ 
icon-label ( color: #FFF; display: block; font-size:12px; ) 


/* position the icons at the bottom of the block to adjust for uneven icon heights */ 
icon-springboard ( position: absolute; bottom: 0; width: 10096; ) 


a:link, a:visited, a:hover, a:active { text-decoration:none; } 
</style> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role="page" id="home" style="background:grey:"> 
<div data-role-"header" data-theme="b"> 
<h1> 看 下 面 的 排列 </h1> 
</div> 


<div data-role-"content" > 
«div class="ui-grid-a"> 
<div class="ui-block-a"> 
<div class="icon-springboard"> 
<a href="#"> 
«img src-"images/movie-1-lg.png" alt="Now Playing"> 
«span class="icon-label">Now Playing</span> 
<la> 
</div> 
</div> 
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«div class-"ui-block-b"» 
«div class-"icon-springboard"^ 
«a href="#"> 
«img src-"images/eye-lg.png" alt-"Coming Soon" 
«span class-"icon-abel"» Coming Soon</span> 
<la> 
</div> 
</div> 


«div class="ui-block-a"> 
«div style="position: absolute; bottom: 0; width:10096;"» 
«a href="#"> 
«img src="images/tags-lg.png" alt="Tickets"> 
<span class="icon-label">Tickets</span> 
<la> 
</div> 
</div> 


«div class="ui-block-b"> 
<div style="position: absolute; bottom: 0; width:100%;"> 
«a href-". /ch4/contact-us.html" 
«img src-"images/group-lg.png" alt-"Contact Us"> 
«span class-"icon-label"» Contact Us</span> 
<la> 


</div> 
</div> 
</body> 
</html> 


上 述 实 例 代 码 执行 后 的 效果 如 图 20-13 所 示 。 


看 下 和 的 排列 


图 20-13 执行 效果 
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在 本 书 前 面 所 讲解 的 演示 实例 中 ， 当 阅读 整个 移动 页 面 的 内 容 时 需要 反复 滚动 页 面 ， 影 响 用 户 体 
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验 。 假 如 正在 查找 某 种 蔡 换 方 式 ， 则 可 能 会 考虑 将 内 容 编组 到 可 折 受 的 内 容 块 中 。 

在 jQuery Mobile 应 用 中 ， 要 创建 一 个 可 折 和 过 的 区 块 ， 需 要 先 创建 一 个 容器 ， 然 后 给 容器 添加 data- 
role="collapsible" 属 性 ， 在 容器 内 直接 的 标题 Ch1—h6) FHA, jQuery Mobile 会 将 之 表现 为 可 单 击 的 
按钮 ， 并 在 左 侧 添加 一 个 “+” 按 钮 ， 表 示 是 可 以 展开 的 。 在 头 部 后 面 可 以 添加 任何 想 要 折 车 的 HITML 
标记 ， 框 架 会 自动 把 这 些 标记 包 庄 在 一 个 容器 中 用 以 折 私 或 显示 。 例 如 : 


<div data-role="collapsible"> 


<h3>l'm a header</h3> 
<p>l'm the collapsible content. By default I'm open and displayed on the page, but you can click the header 
to hide me.«/p» 
</div> 
上 述 代码 的 执行 效果 如 图 20-14 所 示 。 G metes 
如 上 代码 所 示 , 在 默认 情况 下 , 可 折合 容器 是 展开 I'm the collapsible content. By defaut Im open and displayed on 
od asd d the page, but you can dlick the header to hide me. 
Hj, TREKKA. ai ARR data- 
collapsed="true" 属 性 ， 可 以 设 为 默认 收缩 。 即 : 20-14 执行 效果 


«div data-role="collapsible" data-collapsed="true"> 


可 折 芝 的 内 容 采 用 了 精简 的 样式 ， 我 们 仅 在 内 容 和 标题 间 添加 了 一 些 margin， 标 题 则 采用 它 所 在 
容器 的 默认 主题 。 


注意 : 与 内 诡 的 页 面 结构 相 比 ， 可 折 到 的 内 容 块 具有 很 多 优势 。 首 先 ， 可 以 将 内 容 折 又 到 分 段 的 组 中 ， 以 
让 它们 在 单个 视图 中 都 是 可 见 的 。 另 外 ， 因 为 淘汰 了 滚动 操作 ， 所 以 用 户 的 体验 也 会 提升 。 
20.3.1 RE Bong B4B 


Fd 20-15 Ss T — CE DEEEARUR 
通过 给 父 容器 添加 data-role="collapsible-set" 属 性 ,给 每 一 个 子 容器 添加 data-role="collapsible" 属 性 ， 
可 以 实现 容器 展开 时 其 他 容器 被 折合 的 效果 ， 类 似 手 风琴 组 件 ， 效 果 如 图 20-16 所 示 。 


© lI'maheader 


© I'ma header in a set of collapsibles 


I'm the collapsible content By default l'm open and displayed on I'm the collapsible content. l'm hidden by default because | have 

the page, but you can click the header to hide me. the "collapsed" state; you need to expandthe header to see 
me. 

© l'manested collapsible header 


© I'ma header in a set of collapsibles 
I'm the collapsible content. By default l'm open and displayed 3 " 
onthe page, but you can click the header to hide me. © I'ma header in a set of collapsibles 


图 20-15 WENER B 20-16 HAAR 
20.3.2 ”创建 可 折 又 的 内 容 块 


在 jQuery Mobile 应 用 中 ， 在 创建 可 折 且 的 内 容 块 时 需要 如 下 所 示 的 两 个 元 素 。 
(1) 创建 一 个 容器 并 添加 data-role="collapsible" 属 性 。 也 可 以 通过 添加 data-collapsed 属性 将 容器 
配置 为 折 革 的 或 展开 的 。 默 认 情 况 下 ， 可 折 和 的 区 域 块 将 会 以 展开 方式 显示 (data-collpased="false") 。 


e. 
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为 了 在 最 初 以 折合 方式 显示 区 域 块 ， 需 要 为 容器 添加 data-collpased-"true" jE f'E 
(2) 在 容器 内 ， 添 加 任意 的 页 眉 元 素 (h1—h6) . jQuery Mobile 框架 会 对 页 眉 进行 样式 化 ， 使 其 

看 起 来 像 是 一 个 带 有 左 对 齐 加 号 图 标 或 减 号 图 标的 可 单 击 按钮 ， 其 中 加 号 图 标 或 减 号 图 标 用 来 指示 该 
容器 是 否 是 展开 的 。 

在 页 眉 之 后 ， 可 以 为 可 折 释 的 区 域 块 添加 任何 HTML 标记 。jQuery Mobile 框架 会 将 该 标记 包含 在 
容器 内 ， 当 用 户 轻 击 页 眉 时 ， 该 容器 或 者 是 展开 ， 或 者 是 折 受 。 通 过 为 可 折 县 的 容器 添加 data-theme 
和 data-content-theme 属性 ， 可 以 分 别 主题 化 可 折 印 的 块 和 与 其 相关 联 的 按钮 。 

Lid 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android PRRI HAA RRRA. 


实例 20-9: 在 Android 中 实现 可 折 县 内 容 块 效果 
源码 路 径 : 光盘 :\codes\20\blockhtml 


实例 文件 block.html 的 具体 实现 代码 如 下 。 


«div data-role-"page" id-"home" data-theme="b"> 
<div data-role-"header" data-theme-"a"» 
<h1> 设 置 </h1> 
</div> 


<div data-role="content"> 


«div data-role-"collapsible" data-collapsed-"true" data-theme="a" data-content-theme="b"> 
<h3> 无 线 </h3> 
«ul data-role-"listview" data-inset= "true"> 
<li><a href="#"><img src-"images/cloud-default.png" height-"22" width="22">MM</a></li> 
<li><a href="#"><img src-"images/cloud-default.png" height-"22" width="22">NN</a></li> 
«Jul» 
</div> 


«div data-role="collapsible" data-theme="a" data-content-theme="b"> 
<h3> 程 序 应 用 </h3> 
«ul data-role-"listview" data-inset="true"> 
<li><a href="#"><img src-"images/cloud-default.png" height-"22" width="22">AA</a>< 川 > 
<li><a href="#"><img src-"images/cloud-default.png" height-"22" width="22">BB</a></li> 
<li><a href="#"><img src-"images/cloud-default.png" height-"22" width-"22"» CC«/a» «/li» 
«Jul» 
</div> 


«div data-role-"collapsible" data-collapsed-"true" data-theme="a" data-content-theme="b"> 
<h3> 显 示 </h3> 
«ul data-role-"listview" data-inset= "true"> 
<li><a href="#">DD</a></li> 
<li><a href="#">EE</a></li> 
<lul> 
</div> 


«div data-role-"collapsible" data-collapsed-"true" data-theme="a" data-content-theme="b"> 
<h3> 声 音 </h3> 
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<ul data-role-"listview" data-inset= "true"> 
<li><a href="#">FF</a></li> 
<li><a href="#">GG</a></li> 
<lul> 
</div> 


<div data-role-"collapsible" data-collapsed-"true" data-theme="a" data-content-theme="b"> 


<h3> 安 全 </h3> 

<ul data-role-"listview" data-inset= "true"> 
<li><a href="#">HH</a></li> 
<li><a href="#">XX</a></li> 

<lul> 

</div> 
</div> 
</div> 


在 上 述 实例 代码 中 ， 除 了 默认 情况 下 为 展开 状态 的 “程序 应 用 ”区 域 块 之 外 ， 其 他 所 有 的 内 容 块 
都 已 经 显 式 设置 为 折 营 状态 。 执 行 后 的 效果 如 图 20-17 所 示 。 


GI 


图 20-17 执行 效果 
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在 jQuery Mobile 应 用 中 ， 可 折 又 的 设置 与 可 折 印 的 块 相 似 ， 只 不 过 它 的 可 折 对 区 域 在 视觉 上 是 组 
合 在 一 起 的 ， 而 且 一 次 只 能 展开 一 个 区 域 ， 这 使 得 可 折 又 的 设置 的 外 观 像 手 风琴 ， 效 果 可 见 图 20-16. 

在 设置 内 打开 一 个 新 的 区 域 时 ， 之 前 展开 的 任何 区 域 都 会 自动 折 县 起 来 。 用 于 可 折 又 设置 的 标记 
与 构建 可 折 邯 块 时 使 用 的 标记 相同 。 然 而 ， 为 了 创建 手风琴 样式 的 行为 和 编组 ， 需 要 使 用 data-role= 
"collapsible-set" 添 加 一 个 父 包 装 Cparentwrapper) 。 通 过 为 可 折 又 的 设置 添加 data-theme 和 data-content- 
theme 属性 ， 可 以 分 别 主题 化 可 折 和 县 的 区 域 和 与 其 相关 联 的 按钮 。 


e. 


20.4.1 折叠 组 标记 〈Collapsible set markup) 基础 


在 jQuery Mobile 应 用 中 ， 折 靶 组 的 标记 和 单个 折 倒 区 域 的 标记 的 开头 是 一 样 的 。 将 若干 可 折合 区 
域 用 一 个 容器 包裹 ， 再 给 此 容器 增加 data-role="collapsible-set" 属 性 ， 框 架 会 自动 将 这 些 可 折 又 的 部 件 
组 合成 为 一 个 视觉 上 成 组 的 部 件 ， 并 且 在 同一 个 时 间 只 会 有 一 个 容器 是 展开 的 。 

在 默认 情况 下 ， 折 镭 标 记 中 所 有 的 部 件 都 是 收缩 起 来 的 。 如 果 想 设置 某 个 部 件 是 打开 的 ， 可 以 给 
该 部 件 的 标题 容器 添加 data-collapsed="false" 属 性 。 例 如 : 


<div data-role="collapsible-set"> 
«div data-role="collapsible" data-collapsed="false"> 
<h3>Section 1</h3> 
<p>l'm the collapsible set content for section B.</p> 
</div> 
<div data-role="collapsible"> 
<h3>Section 2</h3> 
<p>l'm the collapsible set content for section B.</p> 
</div> 


</div> 

如 上 述 代 码 所 示 ， 在 默认 情况 下 ， 可 折 受 容器 是 展开 的 ， 可 以 通过 单 击 头 部 收缩 。 给 折 受 的 容器 
添加 data-collapsed="true" 属 性 ， 可 以 设 为 默认 收缩 。 上 述 代码 的 执行 效果 如 图 20-18 所 示 。 

另外 ， 普 通 的 data-theme 属性 可 以 加 在 折 县 组 上 来 设 定 主 题 样式 。 如 果 想 让 折 芝 组 的 标题 单独 设 
计 主 题 样式 ， 可 以 添加 data-content-theme 属性 。 例 如 : 

«div data-role="collapsible-set" data-theme="c" data-content-theme="d"> 


如 果 想 给 组 内 的 每 个 部 件 以 不 同 的 主题 样式 ,可 以 给 每 个 部 件 单独 添加 data-theme 和 data-content- 
theme 属性 。 例 如 图 20-19 所 示 的 效果 。 


© I'ma header in a set of collapsibles 


I'm the collapsible content. I'm hidden by default because I have 
the "collapsed" state; you need to expand the header to see 
Wet + Section header, swatch B 


* Section header, swatch A 


© Ima header in a set of collapsibles 


© Section header, swatch E 


© I'ma header in a set of collapsibles 


图 20-18 执行 效果 图 20-19 部件 样式 不 同 的 效果 
20.4.2 ”实战 演练 


本 节 通 过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 实现 可 折 倒 设置 效果 的 方法 。 


实例 20-10: 在 Android 中 实现 可 折 又 设置 效果 
源码 路 径 : 光盘 :\codes20\sethtml 


实例 文件 sethtml 的 具体 实现 代码 如 下 。 
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«div data-role-"page" id-"home" data-theme="b"> 
«div data-role-"header" data-theme="a"> 
<h1> 设 置 </h1> 
</div> 
<div data-role="content"> 


«div data-role-"collapsible-set" data-theme="a" data-content-theme="b"> 
«div data-role-"collapsible" data-collapsed="true"> 
<h3> 无 线 </h3> 
<ul data-role-"listview" data-inset= "true"> 
<li><a href="#">&#xe117;AA</a></li> 
<li><a href="#">&#xe01d;BB</a></li> 
<lul> 
</div> 


<div data-role="collapsible"> 
<h3> 应 用 </h3> 
«ul data-role-"listview" data-inset= "true"> 
<li><a href="#">&#xe001;CC</a></li> 
<li><a href="#">&#xe428;DD</a></li> 
<li><a href="#">&#xe03d;EE</a></li> 
«Iul» 
</div> 


«div data-role-"collapsible" data-collapsed="true"> 
<h3> 显 示 </h3> 
«ul data-role-"listview" data-inset= "true"> 
<li><a href="#">FF</a></li> 
<li><a href="#">GG</a></li> 
«Iul» 
</div> 


«div data-role="collapsible" data-collapsed="true"> 
<h3> 声 音 </h3> 
«ul data-role-"listview" data-inset-"true"» 
<li><a href="#">HH</a></li> 
<li><a href="#">lll</a></li> 
«Iul» 
</div> 


«div data-role-"collapsible" data-collapsed="true"> 
<h3> 安 全 </h3> 
<ul data-role-"listview" data-inset= "true"> 
<li><a href="#">GG</a></li> 
<li><a href="#">HH</a></li> 
<lul> 
</div> 
</div> 


<l- 
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«div data-role-"collapsible-set"^ 
«div data-role-"collapsible" data-collapsed-"true"» 
«h3»Section A«/h3» 
<p>l'm the collapsible content in a set so this feels like an accordion. I'm hidden by default 
because | have the "collapsed" state; you need to expand the header to see me.</p> 
</div> 
«div data-role-"collapsible" data-collapsed="true"> 
«h3»Section B«/h3» 
<p>l'm the collapsible content in a set so this feels like an accordion. I'm hidden by default 
because | have the "collapsed" state; you need to expand the header to see me.</p> 


</div> 
«div data-role-"collapsible" data-collapsed="true"> 
«h3»Section C«/h3» 
<p>l'm the collapsible content in a set so this feels like an accordion. I'm hidden by default 
because | have the "collapsed" state; you need to expand the header to see me.«/p» 


</div> 
«div data-role-"collapsible" data-collapsed="true"> 
«h3»Section D«/h3» 
<p>l'm the collapsible content in a set so this feels like an accordion. I'm hidden by default 
because | have the "collapsed" state; you need to expand the header to see me.«/p» 


</div> 
«div data-role="collapsible" data-collapsed="true"> 
<h3>Section E</h3> 
<p>l'm the collapsible content in a set so this feels like an accordion. I'm hidden by default 
because | have the "collapsed" state; you need to expand the header to see me.«/p» 
</div> 
<ldiv>--> 
</div> 
</div> 


上 述 实例 代码 的 执行 效果 如 图 20-20 所 示 。 


图 20-20 ”执行 效果 
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205 使 用 CSS 设置 样式 


ER 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 20 SEVERI CSS 设置 样式 .avi 

在 jQuery Mobile 应 用 中 , 可 以 使 用 CSS 设置 屏幕 中 元 素 的 样式 。 通常 在 使 用 背景 图 像 的 地 方 使 用 
CSS 渐变 。 用 CSS 渐变 替代 图 片 ， 能 够 很 好 地 适用 于 灵活 的 布局 ， 而 且 当 浏览 器 不 提供 支持 时 ， 也 可 
以 优雅 地 降级 。 例 如 ， 通 过 添加 渐变 ， 可 以 将 一 个 Web 元 素 以 一 种 更 为 优雅 的 方式 显示 出 来 。 


20.5.1 ”实现 背景 渐变 


只 要 是 使 用 背景 图 像 的 地 方 就 可 以 使 用 渐变 , 例如 渐变 通常 用 于 样式 化 页 眉 、 内 容 和 按钮 的 背景 。 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 实现 背景 渐变 效果 的 方法 。 

区 BIS 实例 20-11: 在 Android 中 实现 背景 渐变 效果 
- 源码 路 径 : 光盘 :\codes\20Vianbianl html 


实例 文件 jianbian1.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>jMovies</title> 
«meta name="viewport" content-"width-device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
&:link,a:visited, a:hover, a:active { text-decoration:none; } 
.Ui-block-a, .ui-block-b { height: 100px; position: relative; } 
.Ui-grid-a { text-align: center; } 
.icon-label { color: &FFF; display: block; font-size:12px; ) 
.icon-springboard ( position: absolute; bottom: 0; width: 10096; ) 


.background-gradient { 
background-image: -webkit-gradient( 

linear, 
left bottom, 
left top, 
color-stop(0.22, rgb(92,92.92)), 
color-stop(0.57, rgb(158,153,158)), 
color-stop(0.84, rgb(92,92.92)) 


H 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 


«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
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<body> 


«div data-role-"page" id-"home" class-"background-gradient"^ 
«div data-role-"header" class-"header-gradient"^ 
<h1> 渐 变 </h1> 
</div> 


<div data-role="content"> 
«div class="ui-grid-a"> 


«div class="ui-block-a"> 
«div class="icon-springboard"> 
<a href="#" > 
<img src-"images/movie-1-lg.png" alt="Now Playing"> 
<span class="icon-label">Now Playing</span> 
<la> 
</div> 
</div> 


«div class-"ui-block-b"» 
«div class-"icon-springboard"^ 
«a href="#"> 
«img src-"images/eye-lg.png" alt-"Coming Soon" 
<span class-"icon-label"» Coming Soon«/span» 
<la> 
</div> 
</div> 


«div class-"ui-block-a"» 
«div style="position: absolute; bottom: 0; width:10096;"» 
«a href="#"> 
<img src-"images/tags-lg.png" alt= "Tickets"> 
<span class-"icon-label"» Tickets«/span» 
<la> 
</div> 
</div> 


«div class-"ui-block-b"» 
«div style="position: absolute; bottom: 0; width:10096;"» 
«a href-". /ch4/contact-us.html" 
«img src-"images/group-lg.png" alt-"Contact Us" 
«span class-"icon-label"» Contact Us</span> 


<la> 
</div> 
</div> 
</div> 
</div> 

</div> 

</body> 

</html> 


403 


o Android SD RUBER ER 


上 述 实例 代码 的 执行 效果 如 图 20-21 所 示 。 


Now Playing Coming Soon 


d 4 


Tickets Contact Us 


2021 执行 效果 
在 上 述 实例 中 ，CSS 渐变 针对 的 是 最 流行 的 WebKit 布局 引擎 。 


20.5.2 ”在 Mozilla 浏览 器 实现 背景 渐变 


在 现实 的 jQuery Mobile 开发 应 用 中 ,通过 包含 其 厂商 特定 的 前 组 的 方式 也 可 以 添加 对 其 他 浏览 器 
的 支持 。 下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Mozilla 浏览 器 中 实现 背景 渐变 效果 的 方法 。 


实例 文件 jianbian2.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>jMovies</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
a:link,a:visited, a:hover, a:active { text-decoration:none; } 
.Ui-block-a, .ui-block-b { height: 100px; position: relative; } 
-ui-grid-a { text-align: center; } 
-icon-label ( color: #FFF; display: block; font-size:12px; } 
-icon-springboard ( position: absolute; bottom: 0; width: 10096; } 


-background-gradient { 
background-image: -webkit-gradient( 

linear, 
left bottom, 
left top, 
color-stop(0.22, rgb(92.92,92)), 
color-stop(0.57, rgb(158,153,158)), 
color-stop(0.84, rgb(92,92,92)) 
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y 
background-image: -moz-linear-gradient(90deg, rgb(92,92,92), rgb(158,153,158), rgb(92,92,92)); 
J 


</style> 

«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 

«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role-"page" id="home" class="background-gradient"> 
<div data-role-"header" class="header-gradient"> 
<h1> 渐 变 </h1> 
</div> 


<div data-role="content"> 
«div class-"ui-grid-a"» 


«div class-"ui-block-a"» 
«div class-"icon-springboard" 
«a href="#" > 
<img src-"images/movie-1-lg.png" alt-"Now Playing" 
<span class-"icon-label"» Now Playing</span> 
<la> 
</div> 
</div> 


«div class-"ui-block-b"» 
«div class-"icon-springboard"» 
«a href="#"> 
«img src-"images/eye-lg.png" alt-"Coming Soon" 
«span class-"icon-label"» Coming Soon«/span» 
«Ja» 
</div> 
</div> 


<div class="ui-block-a"> 
<div style="position: absolute; bottom: 0; width:100%;"> 
<a href="#"> 
<img src-"images/tags-lg.png" alt="Tickets"> 
<span class="icon-label">Tickets</span> 
<la> 
</div> 
</div> 


<div class="ui-block-b"> 
<div style="position: absolute; bottom: 0; width:100%;"> 
<a href="../ch4/contact-us.html"> 
<img src="images/group-lg.png" alt="Contact Us" 
«span class-"icon-label"» Contact Us</span> 
«Ja» 
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</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


上 述 实例 代码 的 执行 效果 如 图 20-22 所 示 。 


图 20-22 ”执行 效果 


20.5.3 ”实现 页 眉 渐 变 效果 


在 jQuery Mobile 应 用 中 ， 实 现 页 眉 渐 变 的 原理 是 登 加 3 个 相互 独立 的 渐变 ， 其 中 包含 一 个 线性 渐 
变 和 两 个 放射 性 渐变 。 放 射 性 渐变 会 创建 一 个 圆 形 的 渐变 效果 。 下 面 通过 一 个 具体 实例 的 实现 过 程 ， 
详细 讲解 实现 页 眉 渐 变 效 果 的 方法 。 


实例 文件 jianbian3.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>jMovies</title> 
«meta name-'"viewport" content-"width-device-width, initial-scale=1"> 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«style» 
a:link,a:visited, a:hover, a:active { text-decoration:none; } 
-ui-block-a, .ui-block-b ( height: 100px; position: relative; ) 
-ui-grid-a ( text-align: center; } 
.icon-label { color: &FFF; display: block; font-size:12px; } 
icon-springboard ( position: absolute; bottom: 0; width: 10096; } 


.background-gradient { 
background-image: -webkit-gradient( 
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linear, 
left bottom, 
left top, 
color-stop(0.22, rgb(92.92,92)), 
color-stop(0.57, rgb(158,153,158)), 
color-stop(0.84, rgb(92,.92,92)) 
y 
background-image: -moz-linear-gradient(90deg, rgb(92,92,92). rgb(158, 153,158), rgb(92,92,92)); 
) 


.header-gradient { 
background-image: 
-webkit-gradient( 
linear, 
left top, 
left bottom, 
from( rgba( 068,213,254,0 )), 
color-stop(.43, rgba( 068,213,254,0 )), 
to( rgba( 068,213,254,1 ))), 
-webkit-gradient( 
radial, 
50% 700, 690, 
50% 700, 689, 
from( rgba( 049,123,220,0 )), 
to( rgba( 049,123,220,1 ))), 
-webkit-gradient( 
radial, 
20 -43, 60, 
20 -43, 40, 
from( rgba( 125,170,231,1 )), 
to( rgba( 230,238,250,1 ))); 
) 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 
«div data-role-"page" id="home" class="background-gradient"> 
«div data-role="header" class="header-gradient"> 
<h1> 渐 变 </h1> 
</div> 


<div data-role="content"> 
<div class="ui-grid-a"> 


<div class="ui-block-a"> 
<div class="icon-springboard"> 
<a href="#" > 
<img src-"images/movie-1-lg.png" alt="Now Playing"> 
«span class="icon-label">Now Playing</span> 
«la» 
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</div> 
</div> 


«div class-"ui-block-b"» 
«div class-"icon-springboard" 
«a href="#"> 
<img src-"images/eye-lg.png" alt-"Coming Soon" 
<span class-"icon-label"» Coming Soon</span> 
<la> 
</div> 
</div> 


«div class="ui-block-a"> 
«div style="position: absolute; bottom: 0; width:10096;"» 
«a href="#"> 
<img src-"images/tags-lg.png" alt-"Tickets" 
<span class-"icon-label"» Tickets«/span» 
<la> 
</div> 
</div> 


«div class-"ui-block-b"» 
<div style="position: absolute; bottom: 0; width:10096;"» 
«a href-". /ch4/contact-us.html"» 
<img src-"images/group-lg.png" alt="Contact Us"» 
<span class-"icon-label"» Contact Us</span> 


<la> 
</div> 
</div> 
</div> 
</div> 

</div> 

</body> 

</html> 


上 述 实 例 代码 的 执行 效果 如 图 20-23 所 示 。 


20-23 ”执行 效果 


第 21 章 主题 化 设计 


在 jQuery Mobile 应 用 中 ， 为 开发 人 员 提供 了 一 个 内 置 的 主题 框架 ， 它 允许 设计 人 员 迅速 地 自 定义 
和 重新 样式 化 他 们 的 用 户 界 面 。 该 主题 框架 使 用 了 CSS 3 特性 ， 通 过 使 用 CSS 3 可 以 在 不 使 用 图 片 的 
情况 下 实现 圆 角 、 阴 影 和 渐变 功能 。 本 章 将 详细 讲解 主题 框架 的 基础 知识 ， 以 及 jQuery Mobile 包含 的 
默认 主题 ， 并 详细 讲解 为 组 件 分 配 主题 的 3 种 方式 和 创建 自 定义 主题 的 方法 。 


21.1 主题 设计 基础 


GR 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 21 章 \ 主 题 设计 基础 .avi 

在 jQuery Mobile 应 用 中 ， 在 页 面 的 主题 内 容 区 域 ( 即 标 有 data-role="content" 属 性 的 容器 ) 中 ， 应 
该 通过 给 data-role="page" 属 性 的 容器 增加 data-theme 属性 的 方式 ， 来 确保 不 管 页 面 多 高 ， 背 景色 都 能 
够 应 用 到 整个 页 面 。 如 果 只 是 为 data-role="content" 容 器 添加 了 data-theme 属性 ， 则 背景 色 会 在 内 容 结 
东部 分 停止 ， 可 能 会 造成 固定 尾部 栏 和 内 容 之 间 产 生 留 白 。 例 如 : 


«div data-role-"page" data-theme="a"> 


WA n] dre CBE E SRI data-theme 属性 的 方式 ， 可 以 给 折 县 块 的 标题 设置 主题 。 图 标 和 
折 和 登 的 内 容 目前 还 不 能 通过 data-theme 属性 设置 ， 但 是 可 以 通过 自 定义 的 css 设置 。 例 如 : 


«div data-role="collapsible" data-collapsed-"true" data-theme="a"> 
如 图 21-1 一 图 21-5 所 示 分 别 演示 了 主题 一 主题 e 共 5 种 样式 的 效果 。 


H1 Heading 


H1 Heading 


This is a paragraph that contains strong, emphasized and 
linked text Here is more text so you can see how HTML 
markup works in content. Here is more text so you can see 
now HTML markup works in content. 


@ "manthemed collapsible 


图 21-2 主题 b 


@ I'm anthemed co 


图 21-1 主题 a 


H1 Heading 
This is a paragraph that cortains strong, emphasized and 
linked text Here is more text so you can see how HTML 


markup works in content. Here is more tex: so you can see 
how HTML markup works in content. 


© I'man themed collapsible 


21-3 主题 c 


H1 Heading 


This is a paragraph that contains strong, emphasized and 
linked text Here is more text so you can see how HTML 
markup works in content Here is more text so you can see 
how HTML markup works in content. 


© l'man themed collapsible 
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H1 Heading 


This is a paragraph that contains strong, emphasized and 
linked text. Here is more text so you can see how HTML 
markup works in content. Here is more text so you can see 
how HTML markup works in content. 


le; 
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在 本 书 前 面 讲 解 的 实例 中 ， 已 经 学 习 了 如 何 使 用 data-theme 属性 为 页 面容 器 (页面 、 页 眉 、 内 容 、 
页 脚 ) 和 表单 元 素 应 用 其 他 主题 。 其 实 可 以 使 用 一 个 未 主题 化 的 页 面 ， 然 后 使 用 不 同 的 页 眉 和 列表 主 
题 (添加 了 简单 的 data-theme 属性 ) 对 其 重新 样式 化 处 理 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 主题 设置 显示 样式 的 方法 。 


实例 21-1: 在 Android 中 使 用 主题 设置 显示 样式 
源码 路 径 : 光盘 :\codes\21\theme-list.html 


实例 文件 theme-listhtml 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<title>jMovies</title> 
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
.ui-li-heading { overflow: auto; white-space:normal; } 
img ( margin:10px; } 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/iquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role="page"> 
<div data-role-"header" data-theme="b"> 
<h1> 精 彩电 影 </h1> 
</div> 


«div data-role="content"> 
«ul data-role-"listview" data-inset-"true" data-theme="a"> 
<li data-role="list-divider"> 正 在 播放 </li> 
<li> 
<a href="#"> 
<img src="images/111.jpg" /> 
<h3> 变 形 金 刚 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
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«lli 
<li> 
<a href="#"> 
«img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
<la> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/333 jpg" /> 
<h3> 雷 雨 </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 131 min.</p> 


<la> 
«lli» 
«Jul» 
</div> 
</div> 
</body> 
</html> 


在 上 述 代码 中 ， 通 过 如 下 所 示 的 代码 调用 了 CSS 样式 文件 。 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
上 述 实 例 代码 的 执行 效果 如 图 21-6 所 示 。 


图 21-6 执行 效果 
212 主题 和 调 色 板 


GR 知识 点 讲解 : 光盘 \ 视 频 讲解 第 21 章 \ 主 题 和 调 色 板 .avi 
在 jQuery Mobile 应 用 中 ，CSS 文件 jquery.mobile-x.xx.min.js (x.xx 表示 版 本 号 ) 总 是 我 们 最 先导 
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入 到 页 眉 元 素 中 的 资源 Casset) 。 该 文件 包含 用 于 jQuery Mobile 应 用 程序 的 默认 结构 和 主题 。 建 议 广 


大 读者 花 一 些 时 间 ， 使 用 自己 最 喜欢 的 编辑 器 来 研究 一 下 该 文件 的 内 容 。 


jQuery Mobile CSS 文档 包含 两 个 部 分 ， 分 别 是 主题 部 分 和 结构 部 分 ， 具 体 说 明 如 下 。 


212.1 ”主题 设置 


文档 前 半 部 分 包含 默认 的 主题 设置 ， 主 题 设置 管理 所 有 组 件 的 可 视 化 样式 (背景 、 


边界 、 颜 色 、 


字体 和 阴影 ) 。 在 设置 data-theme 主题 时 ， 具 有 5 个 不 同 的 可 选项 : a、b、c、d、e。 从 技术 角度 上 ， 
这 些 字 母 〈a 一 z) 被 称 为 调 色 板 。 在 查看 jQuery Mobile CSS 文件 时 可 能 会 注意 到 ，CSS 文件 内 出 现 的 


第 一 个 调 色 板 是 调 色 板 a。 例 如 下 面 是 jQuery Mobile 主题 设置 的 部 分 代码 。 


-ui-bar-a( 
border:1px solid #333; 
background:#111; 
color:#fff; 
font-weight:700; 
text-shadow:0 -1px 0 #000; 
background-image:-webkit-gradient(linear,left top,left bottom, from(#3c3c3c),to(#111)); 
background-image:-webkit-linear-gradient(£3c3c3c, 11); 
background-image:-moz-linear-gradient(£3c3c3c, 11); 
background-image:-ms-linear-gradient(£*3c3c3c, s 11); 
background-image:-o-linear-gradient(s£3c3c3c, 11); 
background-image:linear-gradient(£3c3c3c, 11) 


) 
.ui-bar-a,.ui-bar-a input,.ui-bar-a select,.ui-bar-a textarea,.ui-bar-a button( 
font-family:Helvetica, Arial, sans-serif 


-ui-bar-a .ui-link-inherit( 
color:#fff 


ui-bar-a a.ui-link{ 
color:#7cc4e7; 
font-weight:700 

} 

.Ui-bar-a a.ui-link:visited{ 

Color:#2489ce 

} 

.Ui-bar-a a.ui-link:hover{ 
color:#2489ce 

) 

-ui-bar-a a.ui-link:active( 

color:#2489ce 


.ui-body-a,.ui-overlay-a{ 
border:1px solid #444; 
background:#222; 
color:#fff, 
text-shadow:0 1px 0 #111; 
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font-weight:400; 
background-image:-webkit-gradient(linear,left top,left bottom,from(444).to($£222)); 
background-image--webkit-linear-gradient(£444 $222); 
background-image:-moz-linear-gradient(£444 $222); 
background-image:-ms-linear-gradient(£444 $222); 
background-image:-o-linear-gradient(£444 £222); 
background-image:linear-gradient(4444 $4222) 

) 


21.2.2 Et (swatch) 


在 默认 情况 下 ，jQuery Mobile 有 5 个 调 色 板 可 供 选 择 (a. b. c. d. e) ， 可 以 根据 需要 添加 多 个 
独特 的 调 色 板 。 调 色 板 允许 用 户 为 所 有 的 组 件 配置 独特 的 背景 、 边 界 、 颜 色 、 字 体 和 阴影 。 为 方便 起 
见 ， 用 于 新 调 色 板 的 命名 约定 是 基于 字母 a 一 z 的 。 但 是 ， 调 色 板 名 字 的 长 度 没 有 任何 限制 。 

为 了 让 调 色 板 的 样式 在 所 有 的 组 件 上 保持 一 致 ， 需 要 为 每 个 调 色 板 应 用 视觉 优先 级 约定 ， 有 具体 约 
定 如 下 所 示 。 

B a: 黑色 ， 视 觉 优先 级 的 最 高 级 别 。 


B b: 蓝 色 ， 第 二 级 。 

B c 灰色 ， 基 线 。 

E] d: 白 / 灰 ， 另 外 一 个 (altemate) 第 二 级 。 
E] e: 黄色 ， 重 色 (accent color). 


21.2.3 ”全 局 主题 设置 (global theme settings) 


全 局 主题 设置 是 在 调 色 板 之 后 配置 的 ， 这 些 设 置 为 按钮 添加 了 视觉 上 的 样式 增强 ， 如 圆 角 、 图 标 、 
IM Coverlay) 和 阴影 。 由 于 这 些 设 置 是 全 局 的 ,因此 会 被 所 有 的 调 色 板 配 置 继承 。 例 如 下 面 是 jQuery 
Mobile 全 局 主题 设置 的 部 分 代码 。 


-ui-btn-active( 
border:1px solid #2373a5; 
background:#5393c5; 
font-weight:700;color:#fff; 
cursor:pointer; 
text-shadow:0 1px 0 #3373a5; 
text-decoration:none; 
background-image:-webkit-gradient(linear,left top,left bottom,from(#5393c5),to(#6facd5)); 
background-image:-webkit-linear-gradient(#5393c5,#6facd5); 
background-image:-moz-linear-gradient(#5393c5,#6facd5); 
background-image:-ms-linear-gradient(#5393c5,#6facd5); 
background-image:-o-linear-gradient(#5393c5,#6facd5); 
background-image:linear-gradient(#5393c5,#6facd5); 
font-family:Helvetica, Arial,sans-serif 


} 

-ui-btn-active:visited,.ui-btn-active:hover,.ui-btn-active a.ui-link-inherit( 
color:#fff 

) 
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21.244 结构 (structure) 


jQuery Mobile CSS 文件 的 后 半 部 分 包含 结构 样式 ， 其 中 主要 包含 定位 、 内 间距 、 边 距 、 高 度 
度 设置 。 例 如 下 面 是 jQuery Mobile 结构 样式 的 部 分 代码 。 


ui-mobile,.ui-mobile body( 
height:99.996 


.ui-mobile fieldset, .ui-page( 
padding:O;margin:O 


.ui-mobile a img,.ui-mobile fieldset( 
border-width:O 


) 

.ui-mobile-viewport( 
margin:0; 
overflow-x:visible; 
-webkit-text-size-adjust:10096; 
-ms-text-size-adjust:none; 
-webkit-tap-highlight-color:rgba(0,0,0,0) 


) 
body.ui-mobile-viewport,div.ui-mobile-viewport( 
overflow-x:hidden 


} 
21.3 主题 的 默认 值 


GA 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 21 章 \ 主 题 的 默认 值 .avi 
在 移动 Web 设计 应 用 中 ， 如 果 没 有 为 页 面 添加 data-theme 属性 ，jQuery Mobile 会 为 所 有 的 页 
器 和 表单 元 素 应 用 默认 的 主题 。 例如 创建 了 一 个 基本 的 jQuery Mobile 页 面 , 而 且 没 有 显 式 设置 其 
则 元 素 会 退回 到 它们 的 默认 主题 ， 或 者 是 继承 它们 的 父 容器 的 主题 。 

在 默认 情况 下 ， 内 容 组 件 会 应 用 data-theme="c"。 如 果 按 钮 组 件 没有 默认 主题 ， 则 继承 其 父 容 
默认 主题 。 

例如 在 如 下 所 示 的 实例 中 ， 页 面 、 页 眉 、 页 脚 、 内 容 和 列表 元 素 使 用 的 是 默认 主题 ， 而 表单 
使 用 的 是 继承 的 主题 。 


和 宽 


面容 
ER 


器 的 


元 素 


区 实例 21-2: 在 Android 中 使 用 默认 的 主题 样式 
源码 路 径 : 光盘 :\codes21\defaults.html 


实例 文件 defaults.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 
«meta charset="utf-8"> 
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<title>Themes</title> 
«meta name-'"viewport" content-"width-device-width, minimum-scale=1, maximum-scale=1"> 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
«style» 

label ( 

float: left; 

width: 5em; 

) 
input.ui-input-text ( 
display: inline limportant; 
width: 10em limportant; 
} 
formp( 
clear:left; 
margin:1px; 

) 
</style> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 

<body> 


<div data-role="page"> 
<div data-role="header"> 
<h1>default = "a"</h1> 
</div> 


«div data-role="content" style="text-align:center; margin-top:5px;"> 
default = "c" 


<ul data-role-"listview" data-inset-"true"» 
<li data-role-"list-divider"»default = "b"«/li» 
«li»default  "c"«/li» 
«li»default = "c"«/li» 

«Iul» 


«form id-"test" id-"test" action="#" method-"post"^ 
<p> 
<label for="text">inherits "c":</label> 
<input type="text" name="text" id="text" value="" placeholder="Text input"/> 
«Ip» 
<p> 
<label for="sound">inherits "c":</label> 
<select name="slider" id="sound" data-role="slider"> 
<option value="off >Off</option> 
«option value="on">On</option> 
</select> 
«Ip» 


«a href="#" data-role-"button" Button (inherits "c")«/a» 
</form> 
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</div> 


<div data-role-"footer" data-position="fixed"> 
«h3»default = "a"«/h3» 
</div> 
</div> 
</body> 
</html> 


在 上 述 代码 中 ， 因 为 按钮 的 父 容器 是 内 容 组 件 ， 所 以 此 按钮 会 继承 主题 c。 如 果 按 钮 在 页 眉 容 器 的 
内 部 ， 则 会 继承 页 眉 容器 的 主题 。 上 述 实例 代码 的 执行 效果 如 图 21-7 所 示 。 


detaut - "c 
default = "c7 
default = "c" 

inherits "c" 

iments "c" 


Button (inherits "c") 


图 21-7 执行 效果 
21.4 主题 的 继承 


GR 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 21 章 \ 主 题 的 继承 .avi 
在 jQuery Mobile 应 用 中 ， 组 件 可 以 继承 其 父 容器 的 主题 。 主 题 继 承 具 有 如 下 所 示 的 两 点 好 处 。 
ED ”对 设计 员 来 说 ， 主 题 继 承 会 让 样式 化 的 过 程 更 为 高 效 ， 这 是 因为 可 以 在 一 个 很 高 的 层级 〈 页 
面容 器 ) 设置 一 个 主题 ， 该 主题 会 级 联 (cascade 到 所 有 的 子 组 件 ， 从 而 节省 了 宝贵 的 时 间 。 
Ep ”可 以 保证 组 件 在 整个 应 用 程序 中 具有 一 致 的 样式 。 
例如 在 下 面 的 实例 中 ,使 用 data=theme="e" 属 性 对 页 面容 器 进行 了 样式 化 ， 内 容 会 从 其 父 容器 继承 
主题 e。 


C 5:80 21-3: 继承 主题 e 的 显示 样式 
b 源码 路 径 : Jti codes2lyjicheng.html 


416 


第 21 章 主题 化 设计 


«*IDOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8"> 
<title> Themes</title> 
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
label { 
float: left; 
width: 5em; 
) 
input.ui-input-text ( 
display: inline limportant; 
width: 10em limportant; 
) 
formp( 
Clear:left; 
margin: 1px; 
) 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role="page" data-theme="e"> 
«div data-role="header"> 
<h1> 没 有 继承 </h1> 
</div> 


«div data-role="content" style="text-align:center; margin-top:5px;"> 
继承 "e" 


<ul data-role-"listview" data-inset="true"> 
<li data-role-"list-divider"»;& A 40K «/li» 
«li» S8 86 «li» 
«li» S8 86 «li» 

«Jul» 


«form id-"test" id-"test" action="#" method-"post"» 
<p> 
<label for="text"> 继 承 "e"</label> 
<input type="text" name-"text" id-"text" value="" placeholder-"Text input"/> 
«Ip» 
<p> 
<label for="sound"> 继 承 "e"</label> 
<select name-"slider" id="sound" data-role="slider"> 
«option value-"off'» X «/option 
«option value="on"> 开 </option> 
</select> 
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«Ip» 
«a href="#" data-role-"button"» Button (Inherits "e")</a> 
</form> 
</div> 


«div data-role-"footer" data-position="fixed"> 
<h3> 没 有 继承 </h3> 
</div> 
</div> 


</body> 
</html> 
上 述 实 例 代码 的 执行 效果 如 图 21-8 所 示 。 


图 21-8 执行 效果 
在 jQuery Mobile 应 用 中 ， 还 可 以 为 每 个 组 件 显 式 设计 主题 。 当 设计 人 员 进 行 样式 化 工作 时 ， 采 取 


这 种 方式 会 给 应 用 程序 带 来 极 大 的 灵活 性 ， 而 且 能 够 构建 更 为 丰富 的 设计 应 用 。 下 面 将 通过 一 个 具体 
实例 的 实现 过 程 ， 详 细 讲 解 在 Android 中 使 用 显 式 主题 的 方法 。 
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实例 文件 explicit.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 

<html> 
<head> 
<meta charset="utf-8"> 
<title> Themes</title> 
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<style> 
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label { 
float: left; 
width: 5em; 
) 
input.ui-input-text ( 
display: inline limportant; 
width: 10em limportant; 
i 
fomp{ 
clear:left; 
margin:1px; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


<div data-role="page" data-theme="e"> 
<div data-role="header" data-theme="b"> 
<h1> 主 题 = "b"</h1> 
</div> 


«div data-role-"content" data-theme-"d" style="text-align:center; margin-top:5px;"> 
主题 ="d" 


«ul data-role-"listview" data-inset-"true" data-theme="e" data-divider-theme="e"> 
<li data-role="list-divider"> 主 题 = "e"«/li» 
<li>% "e" 来 自 list</li> 
<lidata-theme="b"> 主 题 = "b"</li> 

«Iul» 


«form id-"test" id-"test" action="#" method-"post"» 

<p> 

<label for="text"> 主 题 "d"</label> 

«input type="text" name-"text" id="text" value="" data-theme="d" placeholder="Text input"/> 

«Ip» 
<p> 
<label for="sound"> 主 题 "b"</label> 
<select name="slider" id="sound" data-role="slider" data-theme="b"> 

«option value-"off'» X «/option 
«option value="on"> 开 </option> 


</select> 
«Ip» 
«a href="#" data-role-"button" data-theme-"a"» Button (Theme = "a")</a> 
</form> 
</div> 


«div data-role-"footer" data-position-"fixed" data-theme="b"> 
<h3> 主 题 = "b"</h3> 
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</div> 
</div> 
</body> 
</html> 


上 述 实例 代码 的 执行 效果 如 图 21-9 所 示 。 
主题 ="d" 
o 


”主题 "e" 来 自 list d 
主题 ="b" 

主题 "d” 

主题 "b* 


CHD + 
Button (Theme = "a") 


图 21-9 执行 效果 
注意 : 需要 遵循 优先 级 。 

在 jQuery Mobile 应 用 中 ， 当 为 组 件 应 用 主题 时 需要 遵循 如 下 所 示 的 优先 级 顺序 。 

0) 显 式 的 主题 。 
如 果 为 组 件 设置 了 data-theme 属 性 ， 该 主题 会 覆盖 任何 继承 的 或 默认 的 主题 。 

(2) 继承 的 主题 。 
继承 的 主题 会 覆盖 所 有 默认 的 主题 。 

(3) 默认 的 主题 。 
在 没有 显 式 设置 主题 也 没有 继承 主题 时 ， 会 应 用 默认 主题 。 
在 默认 情况 下 ， 内 容 容器 的 最 小 高 度 只 会 拉 伸 (stretch) 其 内 部 部 件 的 高 度 。 当 内 容 的 主题 与 其 
页 面容 器 的 主题 不 同时 ， 会 造成 非 100% 内 容 高 度 的 问题 ， 此 时 可 以 使 用 CSS 来 修复 。 例 如 可 以 
用 如 下 所 示 的 代码 将 内 容 容器 的 最 小 高 度 设置 为 屏幕 的 高 度 。 
-ui-content ( 

min-height.inherit; 
) 
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通过 使 用 jQuery Mobile 主题 框架 ,设计 人 员 可 以 迅速 地 自 定义 或 重新 样式 化 他 们 的 用 户 界面 。 通 
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常 来 说 ，jQuery Mobile CSS 文档 被 分 为 主题 和 结构 两 个 部 分 。 在 jQuery Mobile 中 ， 可 以 创建 一 个 自 定 


义 调 色 板 , 用 来 管 


理 能 够 引发 危险 动作 的 图 标 和 /或 按钮 的 视觉 样式 (背景 边界、 颜色 、 字体 和 阴影 》。 


在 jQuery Mobile 应 用 中 ， 手 动 创建 一 个 自 定义 调 色 板 的 步骤 如 下 。 
OD 为 自 定义 主题 创建 一 个 独立 的 CSS 文件 ， 这 样 可 以 保持 自 定 义 文件 与 主 jQuery Mobile CSS 
文件 的 隔离 ， 而 且 会 简化 日 后 的 更 新 。 
注意 : 如 果 计划 用 自 定义 主题 对 整个 jQuery Mobile 应 用 程序 进行 样式 化 ， 推 荐 使 用 从 jQuery Mobile 的 
下 载 站 点 2 下 载 的 只 包含 结构 的 CSS 文 件 。 这 对 不 需要 默认 主题 的 应 用 程序 来 说 ， 只 是 一 个 轻 量 
级 的 替换 方案 ， 而 且 能 够 简化 自 定义 主题 的 管理 。 


(2) 使 用 一 个 现 有 的 调 色 板 作 为 参考 的 基础 。 复 制 与 新 调 色 板 样式 最 为 相似 的 现 有 调 色 板 ， 在 最 
大 程度 上 减少 为 了 创建 新 调 色 板 而 不 得 不 做 出 的 修改 次 数 。 
G) 复制 基础 调 色 板 并 粘贴 到 样式 文件 中 ,然后 重 命名 该 调 色 板 ， 以 便 与 一 个 独特 的 字母 Cf—2) 


相关 联 。 
(4) 为 新 调 


色 板 更 新 CSS 的 视觉 设置 (背景 、 边 界 、 颜 色 、 字 体 和 阴影 ”。 此 时 ， 新 的 v 调 色 


板 对 所 有 的 按钮 过 


行 了 更 新 ， 使 其 具备 一 个 带 白色 文本 的 红色 渐变 背景 。 


实例 21-5: 在 Android 中 使 用 自 定义 的 主题 
源码 路 径 : 光盘 :\codes\21\customl.html 


实例 文件 customl.html 的 具体 实现 代码 如 下 。 
«IDOCTYPE html> 


<html> 
<head> 


«meta charset-"utf-8"» 

«title» Swatch "v"</title> 

«meta name-"viewport" content-"width-device-width, initial-scale=1"> 

«link rel="stylesheet" type="text/css" href-"css/theme/custom-theme1.css" /> 

«link rel="stylesheet" hrefz"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 


<style> 


.tabbar .ui-btn .ui-btn-inner { font-size: 11px!important; padding-top: 24pxlimportant; padding-bottom: 


Opxlimportant; 


) 


-tabbar .ui-btn .ui-icon ( width: 30pxlimportant; height: 20pxlimportant; margin-left: -15pxlimportant; 


box-shadow: 


nonelimportant; -moz-box-shadow: nonelimportant; -webkit-box-shadow:  nonelimportant; 


-webkit-border-radius: none limportant; border-radius: none important; ) 
sthome .ui-icon ( background:  url(../images/53-house-w.png) 5096 5096 no-repeat; background-size: 


22px 20px; ) 


#movies .ui-icon { background: url(./images/107-widescreen-w.png) 50% 50% no-repeat; background- 
size: 25px 17pX; } 


sithe 
20px 20px; ) 


atres .ui-icon (background: url(. /images/15-tags-w.png) 5096 5096 no-repeat; background-size: 


.segmented-control ( text-align:center;) 

.segmented-control .ui-controlgroup ( margin: 0.2em; ) 

-ui-control-active, .ui-control-inactive ( border-style: solid; border-color: gray; 
-ui-control-active ( background: #BBB; ) 
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.Ui-control-inactive ( background: #DDD; } 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


«div data-role="page"> 
«div data-role-"header" data-theme="d" data-position="fixed"> 
<div class="segmented-control ui-bar-d"> 
<div data-role-"controlgroup" data-type="horizontal"> 
«a href="#" data-role-"button" class="ui-control-active"> 电 影 </a> 
«a href="#" data-role-"button" class="ui-control-inactive"> 音 乐 </a> 
«a href="#" data-role-"button" class-"ui-control-inactive"» $&f «/a» 
</div> 
</div> 
</div> 


«div data-role="content"> 
«ul data-role-"listview" data-split-icon-"delete" data-split-theme-" v" 
<li> 
<a href="#"> 
<img src="images/111.jpg" /> 
<h3> 变 形 金刚 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
<a href="#delete" data-transition="slidedown"> 删 除 </a> 
«lli» 
<li> 
<a href="#"> 
<img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
<la> 
«a href="#delete" data-transition="slidedown"> 删 除 </a> 
«lli» 
«li 
«a href="#"> 
«img src-"images/333 jpg" /> 
<h3> 雷 雨 </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
<la> 
«a href="#delete" data-transition="slidedown"> 删 除 </a> 
«lli» 
«li? 
«a href="#"> 


第 21 章 主题 化 设计 


«img src-"images/444 jpg" /> 
<h3> 小 李 飞 刀 3D</h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
</a> 
«a href="#delete" data-transition="slidedown"> 删 除 </a> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/111.jpg" /> 
<h3> 变 形 金刚 (3D) </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 131 min.</p> 


<la> 
«a href="#delete" data-transition="slidedown"> 删 除 </a> 
«lli» 
«Jul» 
</div> 


«I— tab bar with custom icons —> 
«div data-role-"footer" class-"tabbar" data-position-"fixed"» 
«div data-role-"navbar" class-"tabbar"» 
«ul» 
<li><a href="#" id"home" data-icon-"custom"» 3: 91 «/a» «/li» 
<li><a href="#" id-"movies" data-icon-"custom" class-"ui-btn-active"» Movies «/a» «/li» 
<li><a href="#" id-"theatres" data-icon-"custom"» Eie «/a» «/li» 
«Iul» 
</div> 
</div> 
</div> 


«div data-role="dialog" id="delete"> 
<div data-role="content" data-theme-"c"» 
«span class="title"> 确 定 删 除 吧 ?</span> 


«a href="#home" data-role="button" data-theme="V"> 删 除 </a> 
«a href="#home" data-role-"button" data-theme-"c" data-rel="back"> 取 消 </a> 
</div> 
<style> 
span.title { display:block; text-align:center; margin-top:10px; margin-bottom:20px; } 
</style> 
</div> 


</body> 
</html> 


然后 编写 自 定义 CSS 文件 custom-themel.css， 具 体 实现 代码 如 下 。 


.ui-bar-v { 
font-weight: bold; 
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border 1px solid #999; 
background: #dedede; 
color: #000; 


text-shadow: 0 1px Opx #fff, 

background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(50%, #ccc), color-stop 
(50%, #b5b5b5), to(#eee)); /* Saf4*, Chrome */ 

background-image: -webkit-linear-gradient(top, #fff 096, #ccc 50%, #b5b5b5 5096, #eee 10096); /* Chrome 
10+, Saf5.1+ */ 

background-image: -moz-linear-gradient(top, #fff 096, #ccc 50%, #ce2021 50%, #eee 100%); /* FF3.6 */ 


background-image: -ms-linear-gradient(top, #fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%); /* IE10 */ 
background-image: -o-linear-gradient(top, #fff 0%, #ccc 50%, #b5b5b5 50%, #eee 100%); /* Opera 11.10+ */ 
background-image: linear-gradient(top, #fff 096, #ccc 5096, #b5b5b5 50%, #eee 100%); 

) 

.ui-bar-v, 

-ui-bar-v input, 

-ui-bar-v select, 


-ui-bar-v textarea, 
.ui-bar-v button ( 
font-vamily: Helvetica, Arial, sans-serif; 


) 

-ui-bar-v .ui-link-inherit ( 
color: 3333; 

) 

.ui-bar-v .ui-link ( 
color: #2489CE; 
font-weight: bold; 

) 
.ui-btn-up-v ( 
border: 1px solid #999; 
background: #e79696; 
color: #fff, 


text-shadow: 0 1px Opx  ?ffff; 

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E79696), to(#ce2021), color-stop(.4, 
#E79696)); /* Saf4+, Chrome */ 

background-image: -webkit-linear-gradient(096 5696 90deg,#CE2021, #E79696, #E79696 10096); /* Chrome 
10+, Saf5.1+ */ 

background-image: -moz-linear-gradient(096 5696 90deg,CE2021, #E79696, #E79696 100%); /* FF3.6 */ 

background-image: -ms-linear-gradient(096 5696 90deg,#CE2021, #E79696, #E79696 100%); /* IE10 */ 


background-image: -o-linear-gradient(096 5696 90deg,fCE2021, #E79696, #E79696 10096); /* Opera 
11.10+ */ 

background-image: linear-gradient(096 5696 90deg,#CE2021, 479696, #E79696 10096); 
) 
.ui-btn-up-v a.ui-link-inherit ( 

color: #333; 
) 

-ui-btn-hover-v ( 

border: 1px solid #777; 

background: #e5e5e5; 

color: #fff, 


text-shadow: 0 1px Opx #fff, 
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E79696), to(#ce2021), color-stop(.4, 


第 21 章 主题 化 设计 


#E79696)); /* Saf4*, Chrome */ 
background-image: -webkit-linear-gradient(096 5696 90deg,#CE2021, #E79696, #E79696 10096); /* Chrome 
10+, Saf5.1+ */ 
background-image: -moz-linear-gradient(0% 56% 90deg,#CE2021, #E79696, #E79696 100%); /* FF3.6 */ 
background-image: -ms-linear-gradient(096 5696 90deg,#CE2021, #E79696, #E79696 100%); /* IE10 */ 


background-image: -o-linear-gradient(096 5696 90deg,#CE2021, $E79696, #E79696 10096); /* Opera 
11.10* */ 

background-image: linear-gradient(096 5696 90deg,#CE2021, $£E79696, #E79696 10096); 
) 

-ui-btn-hover-v a.ui-link-inherit ( 

color: #fff, 
) 

.ui-btn-down-v ( 

border: 1px solid #888; 

background: #ccc; 

color: #ff; 


background-image: -webkit-gradient(linear, 0% 0%, 0% 10096, from(#E79696), to(#ce2021), color-stop(.4, 
#E79696)); /* Saf4+, Chrome */ 

background-image: -webkit-linear-gradient(0% 5696 90deg,#CE2021, #E79696, #E79696 10096); /* Chrome 
10+, Saf5.1+ */ 

background-image: ^ -moz-linear-gradient(0% 5696 90deg,#CE2021, #E79696, #E79696 100%); /* FF3.6 */ 

background-image: -ms-linear-gradient(096 5696 90deg,#CE2021, $E 79696, #E79696 10096); /* IE10 */ 

background-image: -o-linear-gradient(096 5696 90deg,#CE2021, #E79696, #E79696 10096); /^ Opera 
11.107 */ 

background-image: linear-gradient(096 5696 90deg,#CE2021, #E79696, #E79696 100%); 
) 
-ui-btn-down-v a.ui-link-inherit ( 

color: #fff, 
) 

.ui-btn-up-v, 

-ui-btn-hover-v, 

.ui-btn-down-v ( 

font-vamily: Helvetica, Arial, sans-serif; 

cursor: pointer; 

font-weight: bold; 

text-decoration: none; 

text-shadow: 0 1px Opx #fff, 


) 
.ui-body-v ( 
font-weight: normal; 
border: 1px solid #aaa; 
background: #ccc; 
color: 3411; 


text-shadow: 0 1px Opx #fff, 
background-image: url(images/texture 075.png); 


-ui-body-v, 
-ui-body-v input, 
-ui-body-v select, 
-ui-body-v textarea, 
-ui-body-v button ( 
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font-vamily: Helvetica, Arial, sans-serif; 
) 

-ui-body-v .ui-link-inherit { 

color: #333333; 
} 

-ui-body-v .ui-link { 

font-weight: bold; 

color: #e98a15; 
} 


上 述 实 例 代码 的 执行 效果 如 图 21-10 所 示 。 
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图 21-10 执行 效果 


21.6 ThemeRoller 


63a 知识 点 讲解 ; 光盘 \ 视 频 讲解 \ 第 21 章 \ThemeRoller.avi 

在 jQuery Mobile 网 站 中 包含 一 款 在 线 工具 主题 创建 工具 ， 称 作 ThemeRoller。 这 是 一 种 基于 Web 
的 工具 ， 人 允许 用 户 设计 配色 方案 以 便 与 自 定义 jQuery 移动 网 站 搭配 使 用 。jQuery Mobile 框架 构建 于 主 
题 概念 基础 之 上 ， 这 是 移动 网 站 的 预定 义 外 观 样 式 。 每 个 主题 均 包 含 一 系列 样式 组 ( 称 作 色 板 ) ， 用 
户 可 以 将 其 应 用 至 整个 jQuery Mobile 页 面 ， 也 可 以 仅 应 用 至 部 分 页 面 。 虽然 可 以 理所当然 地 攻 盖 色 板 
内 包含 的 许多 CSS 规则 ， 但 使 用 ThemeRoller 创建 全 新 主题 会 更 加 有 效 。ThemeRoller 工具 的 地 址 是 
http://jquerymobile.com/themeroller/， 可 以 进行 在 线 试用 。 界 面 截图 如 图 21-11 所 示 。 

ThemeRoller 在 线 设计 工具 允许 创建 、 修改 及 保存 主题 , 以 便 在 项 目 中 使 用 。 在 下 载 并 解压 主题 后 ， 
将 文件 复制 到 项 目 文件 夹 内 , 然后 链接 CSS. ThemeRoller 网 站 甚至 可 以 在 下 载 窗口 内 提供 某 些 HTML。 
本 节 将 简要 介绍 使 用 ThemeRoller 工具 的 方法 。 
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21.6.1 调 色 板 和 全 局 设置 


如 图 21-11 所 示 ， 在 ThemeRoller 左 侧面 板 中 的 Global 选项 卡 下 可 以 迅速 调整 以 全 局 方式 应 
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ThemeRoller 在 线 工具 的 截图 效果 


到 所 


有 调 色 板 的 CSS 属性 。 在 此 可 以 调整 字体 集 (font family) 、 活 动 状态 的 颜色 〈active state color) 、 圆 角 
半径 (comer radius) 、 图 标 (icon) 和 阴影 (shadow) 。 例 如 在 左 侧 调 色 板 中 设置 A 的 值 ， 如 图 21-12 
所 示 。 会 在 右 侧面 板 中 自动 显示 对 应 设置 的 效果 图 ， 如 图 21-13 所 示 。 
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B 21-13 右 侧 显 示 对 应 效果 


E， 通 过 设置 Global 选项 卡 中 的 调 色 板 选 项 卡 (a~~z) ， 可 以 为 主题 添加 、 编 辑 或 删除 一 个 调 
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21.6.2 Preview Inspector 和 QuickSwatch Bar 


为 了 更 容易 地 创建 自 定 义 主题 ， 在 预览 面板 的 顶部 提供 了 如 下 两 个 独特 的 工具 。 

B] Preview Inspector: 是 一 个 处 于 On 或 0 他 状态 的 触发 器 (toggle), WE 21-14 所 示 。 当 触发 器 
为 On 时 , 在 预览 面板 中 单 击 一 个 元 素 会 自动 在 左 侧面 板 中 显示 该 元 素 的 可 编辑 属性 。 当 需要 
快速 编辑 样式 时 ， 这 样 可 以 节省 宝贵 的 时 间 。 


Sample text and links. Sampie text and links. Sample text and links. 
| List Header List Header List Header 
| Read-only list item Read-only list item Read-only list item 
Linked list item © Linked list item o Linked list item © 
Q Radio © Radio Q Radio 
Checkbox E Checkbox Checkbox 
ea- ar a- 
Option 1 o Option 1 © Option 1 eo 


图 21-14 On 状态 下 可 以 编辑 某 元 素 的 样式 


回 QuickSwatch Bar: 是 一 个 出 现在 Preview Inspector 下 方 的 色彩 频谱 。 这 是 一 个 很 强大 的 工具 ， 
允许 用 户 将 任何 颜色 拖 放 到 预览 页 面 中 的 元 素 上 ， 或 者 是 拖 放 到 左 侧面 板 中 的 颜色 属性 上 。 
在 QuickSwatch Bar 的 下 面 是 两 个 深 动 条 ， 用 来 调整 调 色 板 的 亮度 和 饱和 度 。 此 外 ， 用户 最 近 
选择 的 颜色 会 显示 在 色彩 频谱 的 右 侧 ， 以 方便 快速 重用 。 如 图 21-15 PRAE EA 


o A o 0 B 

Sample text and links. Sample text and links. Sample text and links. 
List Header. List Header. List Header 
Read-only list item Read-only list item Read-only list item 
Linked list item o Linked listitem Linked list item 
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21-15 在 按钮 上 拖 入 图 颜色 块 的 效果 
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21.6.3 ”使 用 Adobe Kuler 集成 工具 


当 用 户 需 要 从 零 开始 创建 调 色 板 时 , 可 能 会 遇 到 麻烦 .为 了 简化 该 过 程 , ThemeRolloer P3 8. Y Adobe 
的 Kuler 集成 工具 ， 其 在 线 地 址 是 https://kuler.adobe.com/create/color-wheel/, "md 21-16 所 示 。 


图 21-16 Adobe Kuler 在 线 效果 
Kuler 是 一 个 允许 人 们 创建 、 共 享 调 色 板 ， 并 对 调 色 板 进 行 排名 的 站 点 。 为 了 查看 Kuler 中 可 用 的 
调 色 板 ， 可 单 击 在 QuickSwatch Bar 上 方 出 现 的 Adobe Kuler 链接 。 当 打开 Kuler app 时 ， 会 在 左 侧面 板 
中 显示 一 个 搜索 过 滤器 ， 它 允许 用 户 按照 最 近 使 用 的 调 色 板 、 最 流行 的 调 色 板 ， 以 及 调 色 板 排名 进行 过 
滤 ， 用 户 也 可 以 自 定义 搜索 。 当 找到 感 兴趣 的 一 种 颜色 时 ， 只 需 将 其 拖 放 到 预览 面板 中 的 元 素 上 即 可 。 


21.6.4 ”使 用 ThemeRoller 
为 了 便于 比较 , 通常 在 ThemeRoller 中 创建 一 个 红色 的 重 色 调 色 板 , 假如 需要 使 用 红色 的 重 色 调 色 


板 来 覆盖 jQuery Mobile 的 默认 e 调 色 板 ， 需 要 采取 如 下 所 示 的 步骤 。 
(1) 在 ThemeRoller 中 , 通过 单 击 右上 角 的 Import 超 链接 导入 一 个 现 有 的 主题 , 如 图 21-17 所 示 。 


onu ; G > o Download $ Import 
Version 1.3.1 ott * a x 


i 


图 21-17 Import 导入 和 Download T 2 
(2) 在 主题 导入 之 后 ， 找 到 需要 修改 的 调 色 板 。 这 里 修改 默认 的 e 调 色 板 。 
(GO 为 红色 的 重 色调 色 板 寻 找 一 个 合适 的 基线 颜色 。 可 以 在 QuickSwatch Bar 或 Kuler 集成 工具 
中 找到 一 种 合适 的 红色 。 
(4) 在 找到 了 适当 的 基线 颜色 后 ， 使 用 选 定 的 颜色 来 更 新 预览 面板 中 的 元 素 。 例 如 ， 使 用 一 个 深 
红 的 重 色 对 页 眉 和 所 有 的 元 素 进行 样式 化 。 
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C 在 预览 面板 中 ， 进 行 任何 必要 的 调整 ， 如 可 以 微调 颜色 ， 或 者 是 使 用 背景 渐变 添加 一 些 奇妙 
的 效果 。 与 手动 的 方法 相 比 ，ThemeRoller 可 以 更 加 高 效 地 处 理 编辑 和 预览 。 

(6) 在 适应 了 新 主题 的 布局 之 后 , 单 击 ThemeRoller 右上 角 的 Download 超 链 接 来 下 载 主题 的 CSS， 
如 图 21-17 所 示 。 

(7) 此 时 即 可 在 应 用 程序 中 应 用 新 的 主题 。 为 了 简化 自 定 义 主题 的 管理 ， 建 议 读者 在 使 用 时 分 别 
载 入 结构 文件 和 自 定义 主题 。 

在 接 下 来 的 实例 中 ， 使 用 了 通过 上 述 步骤 创建 的 样式 。 


实例 21-6: 在 jQuery Mobile 应 用 中 使 用 通过 ThemeRoller 创建 的 样式 
源码 路 径 : 光盘 :\codes\21\custom2.html 


实例 文件 custom2.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
«title» Swatch "w"«/title» 
«meta name-'"viewport" content-"width-device-width, initial-scale=1"> 
«link rel="stylesheet" type="text/css" href-"css/theme/custom-theme2.css" /> 
«link rel="stylesheet" type="text/css" href-"css/structure/jquery.mobile.structure.css" /> 
«style» 

-tabbar .ui-btn .ui-btn-inner ( font-size: 11pxlimportant; padding-top: 24pxlimportant; padding-bottom: 
Opxlimportant; ) 

-tabbar .ui-btn .ui-icon ( width: 30pxlimportant; height: 20pxlimportant; margin-left: -15pxlimportant; 
box-shadow: nonelimportant; -moz-box-shadow: nonelimportant; -webkit-box-shadow:  nonelimportant; 
-webkit-border-radius: none limportant; border-radius: none important; ) 

#home .ui-icon ( background:url(../images/53-house-w.png) 5096 5096 no-repeat; background-size: 
22px 20px; ) 

#movies .ui-icon ( background:url(. /images/107-widescreen-w.png) 50% 50% no-repeat; background- 
size: 25px 17pX; } 

#theatres .ui-icon ( background:url(../images/15-tags-w.png) 5096 50% no-repeat; background-size: 
20px 20px; } 


.segmented-control { text-align:center;) 
.segmented-control .ui-controlgroup ( margin: 0.2em; ) 
-ui-control-active, .ui-control-inactive ( border-style: solid; border-color: gray; ) 
-ui-control-active ( background: 4BBB; } 
.ui-control-inactive ( background: #DDD; ) 
</style> 
«script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
«script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 


<div data-role="page"> 
«div data-role="header" data-theme-"d" data-position="fixed"> 


<div class="segmented-control ui-bar-d"> 
e. 


«div data-role-"controlgroup" data-type-"horizontal"» 
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«a href="#" data-role-"button" class="ui-control-active"> 电 影 </a> 
«a href="#" data-role-"button" class="ui-control-inactive"> 音 乐 </a> 
«a href="#" data-role="button" class="ui-control-inactive"> 和 舞蹈 </a> 
</div> 
</div> 
</div> 


<div data-role="content"> 
<ul data-role-"listview" data-split-icon-"delete" data-split-theme="e"> 
<li> 
<a href="#"> 
<img src-"images/111.jpg" /> 
<h3> 变 形 金刚 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
«a href="#delete" data-transition="slidedown"> 删 除 </a> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/222 jpg" /> 
<h3>X 战 警 </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 137 min.</p> 
<la> 
«a href="#delete" data-transition="slidedown"> 删 除 </a> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/333 jpg" /> 
<h3> 雷 雨 </h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
<la> 
<a href="#delete" data-transition="slidedown"> 删 除 </a> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/444 jpg" /> 
<h3> 小 李 飞 刀 </h3> 
<p> 评 论 : PG</p> 
<p> 时 长 : 95 min.</p> 
<la> 
<a href="#delete" data-transition="slidedown"> 删 除 </a> 
«lli» 
«li» 
«a href="#"> 
«img src-"images/111.jpg" /> 
<h3> 变 形 金刚 (3D)</h3> 
<p> 评 论 : PG-13</p> 
<p> 时 长 : 131 min.</p> 
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<la> 
«a href="#delete" data-transition="slidedown"> 删 除 </a> 
«lli» 
«Iul» 
</div> 


«I— tab bar with custom icons 一 > 
«div data-role-"footer" class-"tabbar" data-position-"fixed" 
<div data-role-"navbar" class-"tabbar"^ 
<ul> 
<li><a href="#" id="home" data-icon="custom">Home</a></li> 
<li><a href="#" id="movies" data-icon="custom" class="ui-btn-active">Movies</a></li> 
<li><a href="#" id="theatres" data-icon="custom">Theatres</a></li> 
<lul> 
</div> 
</div> 
</div> 


«div data-role="dialog" id="delete"> 
<div data-role-"content" data-theme-"c"» 
«span class="title"> 确 定 删除 吗 ?</span> 


«a href-"ithome" data-role-"button" data-theme="e"> 删 除 </a> 
«a href="#home" data-role="button" data-theme="c" data-rel="back"> 取 消 </a> 


</div> 
<style> 
span .title ( display:block; text-align:center; margin-top:10px; margin-bottom:20px; } 
</style> 
</div> 
上 述 实例 代码 的 初始 执行 效果 如 图 21-18 所 示 。 单 击 后 面 的 删除 图 标 登 ， 则 会 弹出 一 个 如 图 21-19 
所 示 的 确认 删除 界面 。 
WE as ma 
RHEN 
k SEIR © 
mt o 
BE Een, J 
Hs 252 3D o 
|o siia [Exo EI 
| meen o 
取消 
图 21-18 初始 效果 图 21-19 确认 删除 界面 
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图 21-19 所 示 的 新 界面 样式 是 由 ThemeRoller 工具 创建 的 ， 样 式 文件 名 为 custom-theme2.css， 主 要 
代码 如 下 。 


.Ui-bar-a { 
border: 1px solid #2A2A2A l*[a-bar-border]"*/; 
background: #111111 /^(a-bar-background-color]*/; 
color: #ffffff /*{a-bar-color¥/; 


font-weight: bold; 

text-shadow: 0 /*(a-bar-shadow-x)*/ -1px /*(a-bar-shadow-y)*/ 1px /*(a-bar-shadow-radius)"/ #000000 
/l'(a-bar-shadow-color]*/; 

background-image: -webkit-gradient(linear, left top, left bottom, from(£3c3c3c /*(a-bar-background-start)*/), 
to(#111 /"(a-bar-background-end])"/)); /* Saf4*, Chrome */ 

background-image: -webkit-linear-gradient(top, #3c3c3c /'(a-bar-background-start]*/, #111 /*(a-bar-background- 
end}*/); /* Chrome 10+, Saf5.1* */ 


background-image: -moz-linear-gradient(top, #3c3c3c /*(a-bar-background-start)*/, #111 /*{a-bar- 
background-end}"/}; /* FF3.6 */ 

background-image: -ms-linear-gradient(top, #3c3c3c /*(a-bar-background-start)*/, #111 /*{a-bar- 
background-end}"/}; /* IE10 */ 

background-image: -o-linear-gradient(top, #3c3c3c /*(a-bar-background-start]*/, #111 /*(a-bar- 
background-end)"/J; /* Opera 11.10 */ 

background-image: linear-gradient(top, #3c3c3c /*(a-bar-background-start)*/, #111 /*(a-bar- 
background-end)*/); 
} 
.ui-bar-a, 
.ui-bar-a input, 
.ui-bar-a select, 


.ui-bar-a textarea, 
.ui-bar-a button ( 
font-eamily: Helvetica, Arial, sans-serif /*(a-bar-eont)"/; 
) 
-ui-bar-a .ui-link-inherit { 
color: #fff /^(a-bar-color]*/; 
) 


.ui-bar-a .ui-link { 


color: #7cc4e7 /"(a-bar-link-color]*/; 
font-weight: bold; 
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jQuery Mobile 包含 了 一 个 相当 强大 的 API， 该 API 包含 了 所 有 简便 的 特性 。 本 章 首先 讲解 如 何 配 
置 jQuery Mobile， 讲 解 jQuery Mobile 内 的 每 一 个 特性 ， 重 点 讲解 其 默认 设置 ， 并 演示 如 何 使 用 API 
来 配置 每 一 个 选项 。 然 后 讲解 jQuery Mobile 中 最 受 欢迎 的 方法 、 页 面 事 件 和 属性 。 最 后 讲解 jQuery 
Mobile 的 数据 属性 ， 对 每 个 属性 都 会 给 出 简单 描述 、 示 例 及 其 增强 的 组 件 。 在 讲解 过 程 中 ， 通 过 具体 
的 实例 进行 演示 ， 为 读者 学 习 本 书后 面 的 知识 打 好 基础 。 


22.1 配置 jQuery Mobile 


£a 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 22 章 \ 配 置 jQuery Mobile.avi 
在 jQuery Mobile 应 用 中 ， 当 初始 化 jQuery Mobile 时 会 在 document 对 象 上 触发 一 个 mobileinit 事 
件 。 可 以 绑 定 到 mobileinit 事件 ， 然 后 覆盖 jQuery Mobile 的 〈$.mobile) 默认 配置 。 此 外 ， 可 以 使 用 额 
外 的 行为 和 属性 来 扩展 jQuery Mobile。 通 常 有 两 种 配置 jQuery Mobile 的 方式 ， 例 如 在 下 面 的 代码 中 ， 
可 以 通过 jQuery 的 extend() 方 法 来 覆盖 属性 ， 也 可 以 单独 进行 履 盖 。 
$(document).bind("mobileinit",function(){ 
$.extend($.mobile,{ 
loadingMessage: "Loading...", 
defaultTransition:"pop" 
» 
P: 
$( document).bind("mobileinit" function()( 
$.mobile.10adingMessage-"Initializing" ; 
$.mobile.defaultTransition-"slideup" ; 
p: 


22.1.1 mobileinit 事件 
当 开 始 执行 jQuery Mobile 时 , 就 会 在 document 对 象 上 触发 mobileinit 事件 , 所 以 可 以 绑 定 别 的 行 
为 来 覆盖 默认 配置 。 例 如 : 


S$(document).bind("mobileinit", function()t 

Dr Eon] 

» 

因为 mobileinit 事件 是 在 执行 后 马上 触发 , 所 以 需要 在 加 载 jQuery Mobile 之 前 绑 定 事件 处 理 函 数 。 
建议 按照 如 下 格式 安排 JS 引用 顺序 。 
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«script src-"Jquery js" «/script" 
«script src-"custom-scripting.js"» «/script» 
«script src-"Jquery-mobile.js"» «/script» 


在 事件 绑 定 内 部 ， 可 以 设置 默认 配置 ， 也 可 以 使 用 jQuery 的 $.extend0 方 法 扩展 $.mobile 对 象 。 例 如 : 


S$(document).bind("mobileinit", function()( 
S$.extend( $.mobile , ( 

foo: bar 

y 

» 
或 者 单独 进行 设置 ， 例 如 : 


$(document).bind("mobileinit", function()( 
$.mobile.foo = bar; 


六 
22.1.2 ”可 配置 的 jQuery Mobile 选项 


如 下 所 示 是 在 jQuery Mobile 应 用 中 可 配置 的 $.mobile 选项 ， 可 以 在 自 定义 JavaScript 内 对 其 进行 

T Mi o 
OD ns: 字符 ， 默 认为 “""”。 

指 按照 data- 属 性 格式 安排 的 命名 空间 。 例 如 data-role 可 以 设置 为 任何 东西 ， 默 认为 空 字符 串 。 在 
HTML 5 内 ,数据 属性 属于 新 特性 。 例 如 ，data-role 是 role 属性 的 默认 名 称 空间 。 如 果 想 要 以 全 局 方式 
获 盖 默认 的 名 称 空间 ， 则 需要 覆盖 $.mobile.ns 选项 。 例 如 : 

$.mobile.ns-"jqm-"; 


这 样 做 的 结果 是 ， 所 有 的 jQuery Mobile data- 属 性 都 需要 前 级 data-jqm-。 例 如 ，data-role 属性 变 成 
data-jqm-role。 
注意 : 如 果 使 用 了 data- 命 名 空间 ， 需 要 在 主题 的 CSS 中 手动 更 新 /覆盖 一 个 选择 器 。 按 照 后 面 介绍 的 选项 把 
命名 空间 加 入 到 选择 器 中 。 


(2) autoInitializePage: 布尔 值 ， 默 认为 true。 

当 DOM 加 载 完 成 时 ，JQM 框架 会 自动 调用 $.mobile .initializePage 方法 。 如 果 设 为 ftlse， 则 page 
不 会 自动 初始 化 ， 在 视觉 上 就 会 是 隐藏 的 ， 直 到 $.mobile.initializePage 方法 被 用 户 手 动 调用 为 止 。 对 于 
想 要 完全 控制 页 面 初始 化 顺序 的 高 级 开发 人 员 来 说 ， 可 以 将 该 配置 选项 设置 为 false， 这 会 禁用 所 有 页 
面 组 件 的 自动 初始 化 ， 使 得 开发 人 员 能 够 根据 需要 手动 增强 每 一 个 组 件 。 

(3) subPageUrlKey: 字符 串 ， 默 认为 ui-page。 

URL 参数 用 来 指向 那些 由 组 件 生成 的 子 页 面 〈 如 嵌 套 的 列表 ) ， 并 会 被 解释 成 下 面 的 代码 : 


example.html&ui-page=subpageldentifier 


在 &ui-page= 之 前 的 哈 希 值 会 被 框架 引用 ， 向 此 URL 地 址 做 Ajax 请 求 。 
(4) activePageClass: 字符 串 ， 默 认为 ui-page-active。 
给 当前 页 面 (包括 转 场 中 的 ) 分 配 class， 即 该 CSS 类 分 配给 当前 可 见 和 活动 的 页 面 或 对 话 框 。 例 


Ò 


如 ， 当 多 个 页 面 载 入 到 DOM 中 时 ， 活 动 的 页 面 会 应 用 该 CSS 属性 。 
(5) activeBtnClass: 字符 串 ， 默 认为 ui-btn-active。 
给 活动 状态 的 按钮 分 配 class 值 ， 该 class 值 必须 在 CSS 框架 中 存在 。 即 用 来 识别 和 样式 化 活动 按 
钮 的 CSS 35. iX CSS 属性 通常 用 来 识别 和 样式 化 标签 栏 中 的 活动 按钮 。 
(6) ajaxEnabled: 布尔 值 ， 默 认为 true. 
jQuery Mobile 会 自动 通过 Ajax 处 理 链接 单 击 以 及 表单 提交 。 如 果 无 法 处 理 ，url hash 监听 将 会 被 
禁用 ，url 也 会 像 常 规 那样 发 出 HTTP 请 求 。 在 可 能 的 情况 下 ， 通 过 Ajax 动态 载 入 页 面 。 在 默认 情况 
下 ， 所 有 页 面 的 Ajax 载 入 都 是 打开 的 ， 但 是 外 部 URL、 使 用 rel="extemal" 或 target="_blank" 属 性 标记 
的 链接 除外 。 如 果 禁 用 Ajax， 页 面 链接 会 使 用 普通 的 HTTP 请 求 载 入 ， 而 且 不 会 用 到 CSS 转换 。 
(7) hashListeningEnabled: 布尔 值 ， 默 认为 true。 
jQuery Mobile 会 自动 监听 与 处 理 location hash 的 改变 。 禁 用 该 选项 可 以 防止 jQuery Mobile 处 理 
location.hash 的 改变 ， 让 用 户 自 己 处 理 它 们 ,或 者 在 文档 中 用 完整 的 链接 地 址 指 到 一 个 特定 的 ID 值 上 。 
这 是 基于 location.hash 自动 载 入 和 显示 页 面 ， 以 载 入 DOM 内 的 内 部 页 面 。 可 以 禁用 该 选项 ， 通 过 手动 
方式 来 处 理 hash 的 改变 ， 也 可 以 禁用 该 选项 ， 以 访问 作为 深 链接 的 锚 的 书签 。 
(8) pushStateEnabled: 布尔 值 ， 默 认为 true。 
在 支持 的 浏览 器 上 使 用 history.replaceState 增强 特性 ， 把 基于 哈 希 值 的 Ajax 请 求 转化 为 完整 的 地 
址 。 建 议 在 Ajax 不 可 用 或 在 使 用 外 部 链接 的 情况 下 ， 关 闭 该 特性 。 
(9) defaultPageTransition: 字符 串 ， 默 认为 slide. 
设 定 使 用 Ajax 进行 页 面 转 场 时 默认 的 转 场 效果 。 设 为 none， 则 默认 没有 转 场 动 画 。 在 转换 到 一 个 
页 面 时 ， 使 用 的 是 默认 转换 ， 如 果 不 需要 转换 ， 可 以 将 该 转换 设置 为 none。 
(10) minScrollBack: 字符 串 ， 默 认为 150。 
返回 一 个 页 面 的 最 小 卷 动 距离 ， 即 设置 最 小 深 动 距离 。 而 且 在 返回 页 面 时 ， 该 值 也 能 被 记 住 ， 如 
果 链 接 的 滚动 位 置 超出 了 minSrollBack 的 设置 ， 则 框架 会 自动 滚动 到 启动 转换 的 位 置 或 链接 。 在 默认 
情况 下 ,滚动 阔 值 是 230px， 如 果 希 望 删除 最 小 设置 ， 以 便 框架 在 滚动 时 能 够 无 视 滚动 的 位 置 ， 则 可 以 
将 该 值 设置 为 0。 如 果 想 要 禁用 该 特性 ， 则 将 其 值 设 置 为 infinity。 
(11) loadingMessage: 字符 串 ， 默 认为 loading。 
页 面 加 载 时 默认 显示 的 文字 。 设 为 false， 则 将 不 显示 提示 信息 。loadingMessage HT Ut FLU W 
息 ， 使 其 在 基于 Ajax 的 请 求 期 间 出 现 。 此 外 ， 可 以 指派 一 个 false (boolean) 来 禁用 该 消息 。 如 果 想 在 
运行 时 基于 每 个 页 面 来 更 新 载 入 消息 ， 则 可 以 在 页 面 内 对 其 进行 更 新 。 例 如 : 


$.mobile.loadingMessage="My custom message!"; 
$.mobile.showPageLoadIngMsg(); 


(12) pageLoadEmorMessage: 字符 串 ， 默 认为 Error Loading Page. 
设置 当 Ajax 加 载 错误 的 情况 下 显示 的 信息 。 
(13) gradeA: 返回 一 个 布尔 值 ， 默 认 返 回 $.support.mediaquery 的 值 。 
浏览 器 必须 符合 所 有 支持 的 条 件 才 会 返回 tue。jQuery Mobile 会 调用 该 方法 来 确定 框架 是 否 应 用 
了 动态 的 Css 页 面 增强 。 在 默认 情况 下 ， 该 方法 会 为 支持 媒体 查询 的 所 有 浏览 器 应 用 增强 功能 。 但 是 ， 
jQuery Mobile 只 会 增强 A 级 浏览 器 的 页 面 。IE 7 以 上 版 本 属于 A 级 浏览 器 , 因此 它们 的 显示 会 被 增强 。 
例如 ，$.mobile.gradeA 的 当前 函数 如 下 所 示 。 


e. 
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$.mobile.gradeA: 

$.mobile.gradeA:function(( 

return $.support.mediaquery 11 
$.mobile.browser.ie & &$.mobile.browser.ie»—7; 


) 


(14) allowCrossDomainPages(boolean.default:false) . 
在 使 用 PhoneGap 进行 开发 时 ， 建 议 将 该 配置 选项 设置 为 true。 该 选项 将 允许 jQuery Mobile 管理 
PhoneGap 中 跨 域 (cross-domain) 请 求 的 页 面 载 入 逻辑 。 
(15) defaultDialogTransition(string, default:"pop"). 
在 转换 到 一 个 对 话 框 时 ， 使 用 的 默认 转换 。 如 果 不 需要 转换 ， 可 以 将 该 选项 设置 为 none。 
(16) nonHistorySelectors(string, default:"dialog"). 
用 于 指定 将 哪个 页 面 组 件 排除 在 浏览 器 的 历史 记录 栈 之 外 。 在 默认 情况 下 ， 带 有 data-rel-"dialog" 
的 链接 或 者 带 有 data-role="dialog" 的 页 面 不 会 出 现在 历史 记录 中 。 此 外 , 在 导航 到 相应 页 面前 ， 这 些 非 
历史 的 选择 器 组 件 不 会 更 新 它们 的 URL， 因 此 无 法 为 这 些 页 面 添加 书签 。 
(17) page.prototype.options.addBackBtn(Boolean,default:false)。 
如 果 和 希望 某 个 应 用 程序 上 显示 回 退 按钮 ， 则 将 该 选项 设置 为 trues jQuery Mobile 内 的 回 退 按钮 是 
一 个 智能 的 微 件 ， 只 有 当 要 回 退 的 页 面 处 于 历史 记录 栈 中 时 ， 回 退 按钮 才 会 显示 。 例 如 : 


$.mobile.page.prototype.options.addBackBtn-true; 


(18) page.prototype.options.keepNative(string. default::jqmData(role-'none")::jqmData(role-'nojs") s 
如 果 和 希望 在 无 须 为 标记 添加 data-role="none" 的 情况 下 阻止 系统 初始 化 ， 可 以 自 定义 用 来 阻止 自动 
初始 化 的 keepNative 选择 器 。 例 如 ， 为 了 阻止 框架 初始 化 所 有 的 选择 和 输入 元 素 ， 可 以 更 新 该 选择 器 。 
例如 : 


$.mobile.page.prototype.options.keepNative-"select, input"; 


(19) pageLoadErrorMessage(string, default:"Error Loading Page"). 
当 一 个 Ajax 页 面 请 求 载 入 失败 时 ， 会 出 现 该 错误 响应 消息 。 
(20) touchOverflowEnabled(boolean,default:false) . 
为 了 使 用 本 地 惯性 滚动 momentum scrolling). 来 实现 真正 固定 的 工具 栏 ， 浏 览 器 需要 支持 两 种 定 
位 : fixed 或 overflow:auto。 幸 运 的 是 ， 新 发 布 的 WebKit 开始 支持 该 行为 ， 该 选项 很 有 可 能 在 将 来 成 
为 默认 启用 选项 。 目 前 可 以 通过 将 该 配置 选项 设置 为 tue 来 启用 该 行为 。 
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GR 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 22 章 \ 方 法 .avi 
在 jQuery Mobile 应 用 中 ，jQuery Mobile API 在 $.mobile 对 象 中 提供 了 如 下 所 示 的 方法 。 
(1) $.mobile.changePage: 通过 程序 跳 转 一 个 页 面 到 另 一 个 页 面 ， 以 单 击 一 个 链接 或 者 提交 表单 
的 形式 出 现 〈 当 那些 特性 被 启用 时 ) 。 
方法 $.mobile.changePage 中 的 参数 如 下 。 
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回 to (字符 串 或 对 象 ， 不 可 缺 省 )。 
> FHP: 绝对 或 相对 的 URL 地 址 ("about/us.html")。 
> HR: jQuery 选择 器 对 象 ($("#about"))。 
回 options (对象 ， 可 选 )。 
» ”对象 jQuery 选择 器 对 象 ($("#about"))。 
E 属性 。 
>  allowSamePageTransition (布尔 值 ， 默 认为 flse) : 默认 情况 下 ，changePage() 会 忽略 跳 
转 到 活动 页 面 的 请 求 。 如 果 把 该 项 设 为 tue， 会 使 之 执行 。 开 发 者 应 该 注意 ， 有 些 页 面 
的 转 场 会 假定 跳 转 页 面 请 求 中 初始 页 面 和 目标 页 面 是 不 同 的 ， 所 以 不 会 有 转 场 动画 。 
> changeHash (布尔 值 ， 默 认为 true) : 判断 地 址 栏 的 哈 希 值 是 否 应 被 更 新 。 
> data( 字 符 串 或 对 象 , 默认 为 undefined) : 要 通过 Ajax 请 求 发 送 的 数据 , 只 在 changePage() 
的 to 参数 是 一 个 地 址 时 可 用 。 
> data-url (字符 串 ， 默 认为 undefined) : 完成 页 面 转换 时 要 更 新 浏览 器 地 址 的 URL 地址 。 
如 不 特别 指定 ， 则 使 用 页 面 的 data-url 属性 值 。 
>  pageContainer (jQuery 选择 器 , 默认 为 $.mobile.pageContainer) : 指定 应 该 包含 页 面 的 容器 。 
> reloadPage〈 布 尔 值 ， 默 认为 false) : 强制 刷新 页 面 。 即 使 当前 页 面容 器 中 的 dom 元 素 
已 经 准备 好 ， 也 要 强制 刷新 。 只 在 changePage0 的 to 参数 是 一 个 地 址 时 可 用 。 
> reverse〈 布 尔 值 ， 默 认为 false) : 设 定 页 面 转 场 动画 的 方向 。 设 置 为 tue 时 ， 将 导致 反 
方向 的 转 场 。 
>  showLoadMsg (布尔 值 ， 默 认为 tue) : 设 定 加 载 外 部 页 面 时 是 否 显示 loading 信息 。 
> role CZP, IUW undefined) : 显示 页 面 时 使 用 data-role 值 。 默 认 情 况 下 ， 此 参数 
为 undefined， 表 示 取 决 于 元 素 的 @data-role 属性 。 
> type CFE, 默认 为 get): 指定 页 面 请 求 时 使 用 的 方法 (get 或 者 post)。 只 在 changePage() 
的 to 参数 是 一 个 地 址 时 可 用 。 
E] Transition: 字符 串 类 型 ， 如 pop, slide, none. 
E] Reverse: 布尔 类 型 ， 默 认为 false。 设 置 为 true 时 ， 将 导致 一 个 反方 向 的 旋转 。 
E] changeHash: 布尔 类 型 ， 默 认为 tue， 表 示 页 面 改变 完成 时 将 更 新 页 面 URL 的 哈 希 值 。 
例如 下 面 的 演示 代码 : 
/使 用 slideup 〈 上 滑 ) 的 转 场 效 果 转 到 about/us.html 页 面 
$.mobile.changePage("about/us.html", "slideup"); 
/| 转 到 searchresults 页 面 ， 使 用 来 自 id 为 search 的 表单 数 
$.mobile.changePage(( 
url: "searchresults.php", 


type: "get", 
data: S("form£&search").serialize() 


六 
/使 用 pop 的 转 场 效果 ， 不 记录 进 历史 记录 中 
$.mobile.changePage("../alerts/confirm.html", "pop", false, false); 


(2) jqmData(). jqmRemoveData(). jqmHasData(). 
在 jQuery Mobile 中 ，jqmData0、jqmRemoveData0 应 该 用 在 jQuery Mobile 核心 的 data0 和 removeData() 


e. 


229 jQuery Mobile APT oo 


方法 ， 因 为 它们 会 自动 获取 并 设置 命名 空间 的 属性 (即使 当前 没有 命名 空间 被 使 用 〉。 

当 通 过 jQuery Mobile 的 data 属性 寻找 元 素 时 ， 应 使 用 自 定义 选择 jdamData0， 因 为 该 方法 在 查询 
元 素 时 会 自动 合并 命名 空间 的 data 属性 。 例 如 ， 应 该 使 用 $("div:jqmData(role='page”)")， 而 不 是 ("div 
[data-role='page']") 选 择 元 素 ， 因为 前 者 会 自动 映射 ("div[data-"+ $.mobile.ns +"role='page']")， 从 而 不 需要 
用 户 把 命名 手动 地 连接 成 选择 器 。 

(3) $.mobile.pageLoading (method): 显示 或 隐藏 页 面 加 载 消息 。 该 消息 由 .mobile.loadingMessage 

进行 配置 。 

参数 done 为 布尔 类 型 ， 默 认为 false， 意 味 着 加 载 已 经 开始 。 设 为 true 时 ， 会 隐藏 loading 消息 。 
例如 : 

/显示 页 面 加 载 消息 

$.mobile.pageLoading(); 


/隐藏 页 面 加 载 消息 
$.mobile.pageLoading(true); 


下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 加 载 外 部 页 面 的 方法 。 


实例 22-1: 加 载 外 部 页 面 

KC 源码 路 径 : Jti codes22jiazai.html 
aS EREE 光盘 :codes22yiazai2html —————— 0000000000000 
实例 文件 jiazai-html 的 具体 实现 代码 如 下 。 
«IDOCTYPE html» 
«html lang="en"> 
<head> 
<meta charset="utf-8"> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>jQuery.mobile.loadPage demo</title> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"> 
«script src="http://code.jquery.com/jquery-1.22.1.min.js"></script> 

«I-- The script below can be omitted —> 

«script src-"/resources/turnOffPushState.js"» «/script» 

«script src-"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"» «/script» 
</head> 

<body> 

<div data-role="page"> 

<div></div> 

</div> 

<script> 

$.mobile.loadPage( "us.html" ); 

</script> 

</body> 

</html> 


上 述 代 码 将 加 载 一 个 外 部 页 面 ， 此 页 面 提供 了 具体 的 显示 内 容 ， 并 将 其 插入 到 DOM 中 。 在 上 述 
实例 代码 中 ， 加 载 了 外 部 文件 us.html 的 页 面 到 DOM. 
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实例 文件 jiazai2.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 

«html lang="en"> 

<head> 

«meta charset="utf-8"> 

«meta name="viewport" content-"width-device-width, initial-scale21"» 
«title»jQuery.mobile.loadPage demo</title> 

«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"» 
«script src-"http://code.jquery.com/jquery-1.22.1.min.js"»«/script» 

«I-- The script below can be omitted — 

«script src-"/resources/turnOffPushState.js"» «/script 

«script src-"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"» «/script» 
</head> 

<body> 

<div data-role="page"> 

<div></div> 

</div> 

<script> 

$.mobile.loadPage( "searchresults.php", { 

type: "post", 

data: $( "form#search" ).serialize() 

» 

</script> 

</body> 

</html> 


在 上 述 实例 代码 中 , 加 载 了 一 个 PHP 文件 searchresults.php, 设置 要 发 送 的 表单 数据 是 search 字符 。 
(4) S.mobile.path(methods, properties): 用 来 取得 、 设 置 、 操 作 URL 地 址 。 
(5) mobile.base(methods, properties): 用 来 生成 根 元 素 。 
(6) $.mobile.silentScroll(method): 不 会 触发 任何 事件 ， 静 默 深 屏 到 特定 的 文档 的 Y 值 处 。 其 参数 
是 一 个 数字 类 型 ， 默 认为 0。 例 如 : 


/滚屏 到 y 100px 处 
$.mobile.silentScroll(100); 


下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 使 用 silentScroll(method) 的 方法 。 


。 实例 22-2: 讲解 使 用 silentScroll(method) 的 方法 
et... 源码 路 径 : 光盘 :\codes\22\eun html 


实例 文件 gun.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 
«html lang="en"> 
<head> 
«meta charset="utf-8"> 
«meta name="viewport" content-"width-device-width, initial-scale=1"> 
<title>jQuery.mobile.silentScroll demo</title> 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"» 
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«script src-"http://code.jquery.com/jquery-1.22.1.min.js"» «/script^ 

«I— The script below can be omitted 一 > 

«script src-"/resources/turnOffPushState .js"» «/script 

«script src-"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"» «/script" 
</head> 
<body> 


<div data-role="page"> 


<div data-role="header"> 
<h1>silentScroll() example</h1> 
</div> 
<div data-role="content"> 
<a href="#" onclick="$.mobile.silentScroll(100)" data-role="button">Go down 100 pixels</a> 
<p> <br /><br />Here, we have some text so that we can have <br /> 
some vertical space in order to demonstrate <br /> 
the silentScroll() method.<br /><br /></p> 
<a href="#" onclick="$.mobile.silentScroll(0)" data-role="button">Back to Top</a> 
</div> 
<div data-role="footer"> 
<h4> </h4> 
</div> 


</div> 


</body> 
</html> 


上 述 实 例 代码 执行 后 的 效果 如 图 22-1 所 示 。 


silentScroll() e... 


Go down 100 pixels 


Here, we have some text so that we can 
have 

some vertical space in order to 
demonstrate 

the silentScroll() method. 


Back to Top 


图 22-1 执行 效果 
(7) $.mobile.addResolutionBreakpoints(method): 表示 值 〈 数 字 或 数组 ) ， 给 分 辩 率 class 类 添加 
任意 的 数字 或 数字 数组 。 例 如 : 


/添加 400px 的 分 辩 率 断 点 
$.mobile.addResolutionBreakpoints(400); 


Ò 
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/添加 2 个 分 辩 率 断 点 
$.mobile.addResolutionBreakpoints([600,800]); 


(8) jQuery.mobile.path.get(url): 确定 URL 中 的 目录 部 分 。 其 中 ，url 只 有 一 个 参数 ， 类 型 为 字符 
E. WR URL 中 没有 和 斜 线 ， 则 该 部 分 被 认为 是 一 个 文件 。 该 函数 返回 一 个 给 定 的 URL. 目录 部 分 。 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 使 用 path.get() 的 方法 。 


pr 


K d 8 path.get() É 
源码 路 径 : 光盘 :\codes\22\huo html 


实例 文件 huo.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>jQuery.mobile.path.get demo</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"> 
«script src="http://code.jquery.com/jquery-1.22.1.min.js"></script> 
<!-- The script below can be omitted --> 
«script src-"/resources/turnOffPushState.js"» «/script^ 
«script src-"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"» «/script» 
<style> 
#myResult{ 
border: 1px solid; 
border-color: #108040; 
padding: 10px; 
} 
</style> 
</head> 
<body> 


<div data-role="page"> 
<div data-role="content"> 
<input type="button" value-"http://foo.com/a/file.html" id="button1" class="myButton" data-inline="true" /> 
<input type="button" value="http://fo0.com/a/" id="button2" class="myButton" data-inline="true" /> 
<input type="button" value-"http://foo.com/a" id="button3" class="myButton" data-inline="true" /> 
<input type="button" value="//foo.com/a/file.html" id="button4" class="myButton" data-inline="true" /> 
<input type="button" value="/a/file.html" id="button5" class="myButton" data-inline="true" /> 
<input type="button" value-"file.html" id="button6" class="myButton" data-inline="true" /> 
<input type="button" value="/file.html" id="button7" class="myButton" data-inline-"true" /> 
<input type="button" value="?a=1&b=2" id="button8" class-"myButton" data-inline-"true" /> 
<input type="button" value="#fo0" id="button9" class="myButton" data-inline="true" /> 
<div id="myResult">The result will be displayed here</div> 
</div> 
</div> 
<script> 
$(document).ready(function() { 
$( ".myButton" ).on( "click", function() { 


@ 
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var dirName = $.mobile.path.get( $( this ).attr( "value" ) ); 
$( "#myResult" ).html( String( dirName ) ); 
» 
» 
</script> 


</body> 
</html> 


上 述 实 例 代 码 执行 后 的 效果 如 图 22-2 所 示 。 
http://foo.com/alfile.html 
http://foo.com/al 
http//foo.com/a 
Iifoo.com/alfile.html 
laffile.html file.html 
Ifile.html ?a-1&b-2 


#fo0 


http-//foo.com/a/ 


图 22-2 执行 效果 


(9) path.isAbsoluteUrlO: 功能 是 检测 绝对 网 址 ， 原 型 是 jQuery.mobile.path.isAbsoluteUrl(url). 4 
果 URL 是 绝对 网 址 ， 该 函数 返回 一 个 布尔 值 tue， 否 则 返回 false. 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 使 用 path.isAbsoluteUrlO 的 方法 。 


实例 22-4: 讲解 使 用 path.isAbsoluteUri0 的 方法 


实例 文件 jue.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>jQuery.mobile.path.isAbsoluteUrl demo</title> 
«link rel="stylesheet" href-"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"» 
«script src-"http://code.jquery.com/jquery-1.22.1.min.js"»«/script^ 
«I— The script below can be omitted --> 
«script src-"/resources/turnOffPushState js"></script> 
«script src-"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min js" «/script» 
<style> 
#myResult{ 
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border: 1px solid; 
border-color: #108040; 
padding: 10px; 
} 
</style> 
</head> 
<body> 


«div data-role="page"> 


<div data-role="content"> 
<input type="button" value="http://foo.com/a/file.html" id="button1" class-"myButton" data-inline-"true" /> 
<input type="button" value="//foo.com/a/file.html" id="button2" class="myButton" data-inline-"true" /> 
<input type="button" value="/a/file.html" id="button3" class="myButton" data-inline-"true" /> 
<input type="button" value="file.html" id="button4" class-"myButton" data-inline-"true" /> 
«input type="button" value="?a=1&b=2" id-"button5" class-"myButton" data-inline-"true" /> 
«input type="button" value="#fo0" id-"button6" class-"myButton" data-inline-"true" /> 
«div id-"myResult"*The result will be displayed here</div> 
</div> 
</div> 
<script> 
S$(document).ready(function() { 
$( ".myButton" ).on( "click", function() ( 
var isAbs = $.mobile.path.isAbsoluteUrl( $( this ).attr( "value" ) ); 
$("#myResult" ).html( String( isAbs ) ); 
» 
» 
</script> 


</body> 
</html> 


上 述 实例 代码 执行 后 的 效果 如 图 22-3 所 示 。 


http://foo.com/a/file.html 


Iifoo.com/a/file.html 
lalfile.html 

file.html 

?a-1&b-2 #foo 


true 


22-3 ”执行 效果 


(10) pathisRelativeUrl(: 功能 是 检查 相对 网 址 ， 其 原型 是 jQuery.mobile.path.isRelativeUrl(url) 。 
如 果 URL 是 相对 的 网 址 ， 该 函数 返回 一 个 布尔 值 tue， 和 否则 返回 false。 
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下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 使 用 path.isRelativeUr10 的 方法 。 


: 讲解 使 用 path.isRelativeUrlO 的 方法 
源码 路 径 : 光盘 :\codes\22\xiang html 


实例 文件 xiang.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 
«html lang="en"> 
<head> 
«meta charset="utf-8"> 
<meta name-"viewport" content-"width-device-width, initial-scale-1"» 
«title»jQuery.mobile.path.isRelativeUrl demo</title> 
<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"» 
«script src="http://code.jquery.com/jquery-1.22.1.min.js"></script> 
<l-- The script below can be omitted --> 
«script src-"/resources/turnOffPushState.js"» «/script» 
«script src-"http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"» «/script» 
<style> 
#myResult{ 
border: 1px solid; 
border-color: #108040; 
padding: 10px; 
} 
</style> 
</head> 
<body> 


«div data-role="page"> 


<div data-role="content"> 
«input type="button" value="http://foo.com/a/file.html" id="button1" class="myButton" data-inline="true" /> 
«input type="button" value="//foo.com/a/file.html" id="button2" class="myButton" data-inline="true" /> 
«input type="button" value-"/a/file.html" id="button3" class-"myButton" data-inline-"true" /> 
«input type="button" value-"file.html" id-"button4" class-"myButton" data-inline-"true" /> 
«input type="button" value="?a=1&b=2" id-"button5" class-"myButton" data-inline-"true" /> 
«input type="button" value-"£tfoo" id-"button6" class-"myButton" data-inline-"true" /> 
«div id-"myResult"»The result will be displayed here</div> 
</div> 
</div> 
<script> 
S$(document).ready(function() { 
$( ".myButton" ).on( "click", function() ( 
var isRel = $.mobile.path.isRelativeUrl( $( this ).attr( "value" ) ); 
$( "#myResult" ).html( String( isRel ) ); 
» 
D 
</script> 


</body> 
</html> 
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上 述 实例 代码 执行 后 的 效果 如 图 22-4 所 示 。 
hitp:lfoo.comiaffle.html 
lffoo.comlaffie.html 
Jaffe. html. 
file.htmi 


2a-1&b-2 foo 


false 


图 22-4 执行 效果 
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Gn 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 22 章 \ 事 件 .avi 

在 jQuery Mobile 中 提供 了 多 个 有 用 的 事件 ， 开 发 人 员 可 以 通过 编程 来 使 用 这 些 事件 ， 以 便 在 移动 
Web 应 用 程序 的 页 面 变化 期 间 ， 应 用 预 处 理 过 程 或 事后 处 理 过 程 。 本 节 将 详细 讲解 可 以 在 用 户 的 代码 
中 使 用 的 所 有 jQuery Mobile 页 面 事件 。 


22.3.1 触摸 事件 Touch events 


在 jQuery Mobile 应 用 中 ， 可 用 的 触摸 事件 如 下 。 

(OD tap GRH) : 一 次 快速 、 完 整 的 轻 击 后 触发 。 

(2) taphold 〈 轻 击 不 放 ) : 轻 击 并 按 住 不 放 〈 大 约 1s) 后 触发 。 

(3) swipe (滑动 ) : 1s 内 水 平 拖 忠 大 于 30px, AESF 20px 的 事件 发 生 时 触发 。 但 这 些 参 
数 是 可 以 设置 的 ， 具 体 设 置 选项 如 下 。 

El scrollSupressionThreshold (默认 : 10px): 大 于 该 值 的 水 平 位 移 就 会 抑制 滚动 。 

El durationThreshold (默认 : 1000ms): 滑动 时 间 超 过 该 数值 就 不 会 产生 滑动 事件 。 

El horizontalDistanceThreshold (默认 : 30px): 水 平滑 动 距离 超过 该 数值 才 会 产生 滑动 事件 。 

E] verticalDistanceThreshold ($R: 75px): 竖 直 滑动 距离 小 于 该 数值 才 会 产生 滑动 事件 。 

(4) swipeleft ( 左 滑 ) : 滑动 事件 为 向 左 的 方向 时 触发 。 

(5) swiperight 〈 右 滑 ) : 滑动 事件 为 向 右 的 方向 时 触发 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 演 示 触 发 taphold 事件 的 方法 。 


实例 文件 chufa.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE HTML> 
<html> 


e. 


$225 jQuery Mobile B ABL 


<head> 
«title» Understanding the jQuery Mobile API</title> 
«link rel="stylesheet" href-"jquery.mobile.css" /> 
«script src-"jquery.js"» «/script^ 
«script type-"text/javascript" 
S$(document).ready(function()( 
$(".tap-hold-test").bind("taphold", function(event) ( 
$(this).html("Tapped and held"); 


«script src-"jquery.mobile js"»«/script» 
</head> 


<body> 
<div data-role-"page" id="my-page"> 
<div data-role="header"> 
<h1>Header</h1> 
</div> 
<div data-role="content"> 
«ul data-role-"listview" id="my-list"> 
<li class-"tap-hold-test"» Tap and hold test«/li» 
«Iul» 
</div> 
</div> 
</body> 
</html> 


在 上 述 代码 中 ， 将 一 个 list 列表 和 taphold 事件 进行 了 绑 定 。 当 DOM 加 载 完 毕 ， 触 发 taphold 事件 
后 ， 就 会 显示 Tapped and held 的 提示 信息 。 上 述 实例 代码 执行 后 的 效果 如 图 22-5 所 示 。 


Header 


e Tap and hold test 


图 22-5 执行 效果 
22.3.2 ”虚拟 鼠标 事件 Virtual mouse events 


jQuery Mobile 提供 了 一 系列 虚拟 鼠标 事件 ， 例 如 用 mousedown, mousemove, mouseup 和 click 来 
注册 监听 。 揪 件 会 在 触摸 环境 中 保持 传统 鼠标 环境 下 的 触发 顺序 ， 例 如 ，vmouseup〈 统 一 处 理 触摸 和 
鼠标 按键 松 开 事件 ) 总 是 在 vmousedown 〈 统 一 处 理 触摸 和 鼠标 按 下 事件 ) 之 前 被 触发 ，vmousedown 
总 是 在 vmouseup 之 前 被 触发 。 因 为 虚拟 鼠标 事件 也 会 把 事件 中 放出 的 坐标 信息 标准 化 ， 所 以 在 基于 触 
摸 的 设备 中 可 以 使 用 事件 对 象 的 属性 坐标 : pageX、pageY、screenX、screenY、clientX 和 clientY。 虚 
拟 鼠 标 事件 的 具体 说 明 如 下 。 

(1) vmouseover: 处 理 touch 或 者 mouseover 的 正规 化 的 事件 。 
(2) vmousedown: 处 理 touchstart 或 者 mousedown 的 正规 化 的 事件 。 
(3) vmousemove: 处 理 touchmove 或 者 mousemove 的 正规 化 的 事件 。 
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(4) vmouseup: 处 理 touchend 或 者 mouseup 的 正规 化 的 事件 。 

(5) vclick: 处 理 touchend 或 者 鼠标 单 击 的 正规 化 的 事件 。 在 基于 触摸 的 设备 上 ， 该 事件 是 在 
vmouseup 事件 之 后 触发 的 。 

(6) vmousecancel: 处 理 touch 或 者 mouse 的 mousecancel 的 正规 化 的 事件 。 


注意 : 在 触摸 设备 中 要 慎 用 vclick。WebKit 内 核 的 浏览 器 会 在 touchend 事 件 触 发 后 的 300ms 内 生成 
mousedown、mouseup 和 click 3 个 事件 ， 这 些 生成 的 鼠标 事件 的 目标 会 在 它们 被 触发 时 计算 出 来 ， 
并 且 是 基于 touch 事 件 的 位 置 。 有 些 情况 下 ， 不 同 的 设备 甚至 相同 设备 的 不 同 OS 下 会 产生 不 同 的 
计算 结果 ， 这 就 导致 了 原始 的 单 击 事件 的 目标 与 浏览 器 自己 生成 的 鼠标 事件 的 目标 元 素 可 能 不 
是 同一 个 。 
笔者 在 此 建议 ， 在 触摸 后 可 能 会 改变 单 击 下 面 内 容 的 事件 中 ， 尽 量 使 用 click 而 不 是 vclick 方 法 。 
这 样 的 事件 包括 页 面 转 场 和 其 他 的 一 些 行为 ， 如 收缩 /伸展 等 ， 它 们 的 出 现 会 导致 屏幕 发 生变 化 
或 者 内 容 完全 被 替换 。 


注意 : 应 用 会 调用 一 个 vclick 事件 来 取消 某 个 元 素 的 默认 单 击 事件 。 在 基于 鼠标 的 设备 上 ， 对 vclick 
事件 调用 preventDefault( 方 法 等 同 于 对 真实 单 击 的 时 间 冒 泡 阶段 调用 preventDefault( 方 法 。 在 基 
于 触摸 的 设备 上 就 有 点 复杂 了 ， 因 为 真实 的 单 击 事件 会 在 vclick 事件 触发 300ms 之 后 触发 。 对 于 
触摸 设备 , 对 vclick 事 件 调 用 preventDefault0 方 法 会 有 一 些 vmouse 插 件 的 代码 来 试图 捕获 下 一 个 
单 击 事件 。 所 以 根据 上 述 的 警告 ， 要 匹配 一 个 触摸 事件 和 与 其 对 应 的 鼠标 事件 就 比较 困难 ， 
为 它们 的 目标 是 不 同 的 。 所 以 vmouse 插 件 试 图 通过 坐标 来 识别 一 个 相符 的 单 击 事件 通常 会 失败 。 
有 些 情 况 下 两 个 事件 的 目标 和 坐标 的 识别 都 会 失败 ， 这 样 就 会 导致 单 击 事件 被 触发 或 者 元 素 的 
默认 动作 被 执行 ， 或 者 内 容 被 改变 或 替换 的 情况 下 ， 触 发 了 别 的 元 素 的 单 击 事件 。 如 果 这 样 的 
bug 在 给 定 的 元 素 上 有 规律 地 发 生 ， 建 议 对 于 动作 使 用 click 来 驱动 触发 。 


22.3.3 ”设备 方向 变化 事件 Orientationchange events 


在 jQuery Mobile 应 用 中 ， 设 备 方向 变化 事件 是 orientationchange。 当 设备 的 方向 变化 (横向 手持 设 
备 或 纵向 手持 设备 ) 时 此 事件 被 触发 。 绑 定 此 事件 时 , 回调 函数 可 以 加 入 第 二 个 参数 : portrait 或 landscape; 
作用 为 描述 设备 横 或 纵向 的 属性 。 这 些 值 也 会 作为 class 值 加 入 到 HTML 的 元 素 中 ， 可 以 通过 Css 中 
的 选择 器 改变 它们 的 样式 。 注 意 ， 当 浏览 器 不 支持 orientationchange 事件 时 ， 绑 定 了 resize 事件 。 
手持 设备 方向 改变 时 执行 : 
$(window).bind( 'orientationchange', function(e)( 
var height-document.body.clientHeight - 195; 
S$("scontent").css("min-height" height); 
S$("tthumb").css("margin",height/4.2 + "px auto"); 
» 


上 述 演示 代码 可 用 于 在 手持 设备 方向 改变 时 填充 整个 页 面 ， 以 避免 出 现 空白 。 用户 也 可 以 根据 自 
己 的 需求 对 其 进行 扩展 。 

绑 定 orientationchange 事件 时 ， 要 求 用 户 定位 body 元 素 ， 然 后 使 用 bind 方法 来 绑 定 事件 。 将 
orientationchange 事件 绑 定 到 body 上 ， 需 要 在 文档 就 绪 后 再 绑 定 事件 ， 这 很 重要 ， 否 则 会 获得 不 一 致 
的 结果 ， 因 为 body 元 素 可 能 在 绑 定 时 不 可 用 。 用 户 也 可 以 进一步 增强 该 代码 ， 当 文档 就 绪 时 触发 


e. 
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orientationchange 事件 。 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 使 用 方向 改变 事件 的 方法 。 


实例 22-7: 使 用 方向 改变 事件 
源码 路 径 : 光盘 :\codes\22\fangxiang html 


实例 文件 fangxiang.html 的 具体 实现 代码 如 下 。 


«*IDOCTYPE HTML» 

«html» 

<head> 

<title>Understanding the jQuery Mobile API</title> 

<link rel="stylesheet" href-"jquery.mobile.css" /> 

<script src="jquery.js"></script> 

<script type="text/java script"> 

S$(document).ready(function()( 
S$('body").bind('orientationchange', function(event) ( 

alert('orientationchange: '+ event.orientation); 

» 

» 

</script> 

<script src="jquery.mobile.js"></script> 

</head> 

<body> 

«div data-role-"page" id="my-page"> 

«div data-role-"header"» 

<h1>Header</h1> 

</div> 

<div data-role="content"> 

«ul data-role-"listview" id="my-list"> 

<li class-"tap-hold-test"» Tap and hold test«/li» 

«Iul» 

</div> 

</div> 

</body> 

</html> 


在 上 述 实例 代码 中 ， 当 文档 就 绪 时 会 触发 事件 ， 由 此 可 以 确定 Web 页 面 初始 加 载 时 的 方向 。 当 需 
要 用 设备 的 当前 方向 显示 内 容 时 ， 这 点 特别 有 用 。 另 外 ， 也 可 以 通过 CSS 访问 方向 值 ， 因 为 它们 已 被 
添加 到 了 Web 页 面 的 HTML 元 素 中 。 这 些 强 大 的 特性 使 用 户 可 以 在 设备 的 当前 方向 上 修改 内 容 布局 。 


22.3.4 ”滚屏 事件 Scroll events 


在 jQuery Mobile 应 用 中 ， 有 如 下 两 个 滚屏 事件 。 

CD scrollstart: 屏幕 开始 滚动 时 触发 。 苹 果 的 设备 会 在 滚屏 时 先 冻结 DOM 的 操作 ， 待 滚屏 结束 
后 再 按 队 列 执行 这 些 DOM 操 作 。 我 们 现在 研究 的 是 如 何 让 苹果 的 设备 在 滚屏 开始 前 就 执行 DOM 操 作 。 

(2) scrollstop: 滚屏 结束 时 触发 。 

下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 使 用 滚屏 事件 的 方法 。 
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实例 22-8: 使 用 滚屏 事件 
源码 路 径 : 光盘 :\codes\22\gunping.html 


实例 文件 gunping.html 的 具体 实现 代码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 
«title» Ajax 测试 </title> 
«meta name="viewport" content-"width-device-width, initial-scale=1"> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/> 
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/> 
<script src="jquery-mobile/jquery-1.8.2.min.js"></script> 
«script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script> 
</head> 
<body> 
<div data-role-"page" data-theme="b"> 
<div data-role="header"></div> 
<div data-role="content"> 
<script> 
liscrollstart 事件 
function scrollstartFunc(evt) ( 


try 
{ 
var target = $(evt.target); 
while (target.attr("id") == undefined) { 
target = target.parent(); 
) 
/获取 触 点 目标 id 属性 值 
vartargetld = target.attr("id"); 
alert("targetld: " + targetld); 
} 
catch (e) ( 
alert('myscrollfunc: ' + e.message); 
li 
} 
function myinit() { 
// 绑 定 上 下 滑动 事件 
$("#myul").bind('scrollstart', function () ( scrollstartFunc(event); }); 
} 
window.onload = myinit; 
</script> 


<l- listview 测试 -> 

«ul id="myul" data-role-"listview" data-inset="true"> 
<li data-role="list-divider"> 信 息 列表 </li> 
<li id="li1" data-role="fieldcontain"> 信 息 1</li> 
<li id-"li2" data-role="fieldcontain"> 信 息 2</li> 
<li id="li3" data-role="fieldcontain"> 信 息 3</li> 
<li id-"li4" data-role="fieldcontain"> 信 息 4</li> 
<li id="li5" data-role="fieldcontain"> 信 息 5</li> 
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<li id="li6" data-role-"fieldcontain"»1& & 6</li> 
<li id="li7" data-role-"fieldcontain"»1& & 7</li> 
<li id="li8" data-role-"fieldcontain"»1& & 8</li> 
<li id="li9" data-role-"fieldcontain"»1& & 9</li> 
<li id="li10" data-role-"fieldcontain"»f& & 10</li> 
<lul> 
</div> 
</body> 
</html> 


上 述 实 例 代 码 执行 后 的 效果 如 图 22-6 所 示 。 


。 信 息 10 一 一 一 -一 一 一 一 一 


图 22-6 执行 效果 
22.3.5 ”页 面 加 载 事 件 Page load events 


当 外 部 的 页 面 加 载 到 DOM 中 时 ， 会 触发 如 下 两 个 事件 。 

E] pagebeforeload. 

El pageload 或 者 pageloadfailed 。 

在 导航 到 另外 一 个 页 面 时 ,会 自动 在 文档 上 触发 页 面 改 变 事件 。 当 调用 $.mobile.changePage 方法 时 ， 
会 触发 上 述 事件 。 在 该 进程 中 会 发 生 如 下 所 示 的 两 个 事件 。 

回 ”第 一 个 触发 的 事件 是 pagebeforechange。 

ED ”第 二 个 事件 则 依赖 于 页 面 改变 的 状态 。 

当 页 面 改变 成 功 时 ，pagechange 事件 会 被 触发 ， 如 果 页 面 改 变 失败 ， 则 pagechangefailed 事件 被 触发 。 

(1) pagebeforeload: 此 事件 在 加 载 请 求 发 出 之 前 触发 ， 绑 定 到 该 事件 的 回调 函数 可 以 对 该 事件 调 

用 preventDefault0， 表 明 由 它们 来 处 理 加 载 的 请 求 。 如 果 这 样 做 ， 回 调 函数 必须 对 通过 数据 对 象 传 到 
回调 函数 的 对 象 调用 resolve0) 或 者 reject0 方 法 。 

在 通过 第 二 个 参数 传 到 回调 函数 的 对 象 中 ， 包 含 了 如 下 所 示 的 属性 。 
url( 字 符 串 ): 通过 回调 传 到 $.mobile.loadPage0 的 绝对 或 者 相对 地 址 。 
absUrl( 字 符 串 ): URL 的 绝对 地 址 版 本 。 
dataUrl( 字 符 串 ): 当 识别 页 面 或 者 更 新 浏览 器 地 址 时 使 用 的 绝对 地 址 经 过 过 滤 的 版 本 。 
deferred( 对 象 ): 针对 此 事件 调用 preventDefault0 的 回调 函数 必须 针对 此 事件 调用 resolve0) 或 者 
reject0 方 法 ， 使 得 changePage() 的 请 求 恢复 。 例 如 : 
$( document ).bind( "pagebeforeload", function( event,data )( 


// 让 jam 框架 知道 由 我 们 来 处 理 load 事件 
event.preventDefault(); 
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儿 .加 载 文档 然后 插入 到 DOM 中 

// 在 这 个 回调 或 者 通过 其 他 的 异步 加 载 手段 中 , 调用 resolve 转 入 到 下 面 的 参数 中 , 加 上 一 个 包含 有 页 面 dom 元 素 
的 jQuery 选择 器 

data.deferred.resolve( data.absUrl, data.options, 

page ); 

» 


(2) pageload: 在 页 面 已 成 功 加 载 并 插入 到 DOM 后 触发 。 绑 定 到 该 事件 的 回调 函数 会 被 作为 一 
个 数据 对 象 ， 作 为 第 二 个 参数 。 这 个 对 象 包含 如 下 的 信息 。 
加 ”url( 字 符 串 ): URL 地 址 。 


加 ”absUrl( 字 符 串 ): URL 的 绝对 地 址 版 本 。 


oadPage() 预 加 载 页面 的 方法 。 


实例 文件 yujia.html 的 具体 实现 代码 如 下 。 


«*IDOCTYPE HTML > 
«IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<meta name="viewport" content="width=device-width,initial-scale=1"/> 
<meta charset="utf-8"> 
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/> 
«script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script> 
«script src-"Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> 
</HEAD> 
<BODY> 
«div data-role="page"> 
«div data-role="header"><h1> 预 加 载 页 </h1></div> 
<div data-role="content"> 
<p><a href="about.html"rel="external" data-prefetch="ture"> 点 击 进入 </a></p> 
</div> 
«div data-role="footer"><h1>@2013 3i studio</h1></div> 
</div> 
</BODY> 
</HTML> 


上 述 实例 代码 执行 后 的 效果 如 图 22-7 所 示 。 
从 图 22-7 可 以 很 清楚 地 看 到 , 在 <a> 元 素 链接 的 目标 页 面 about. CB 
htm rl, page 容器 的 内 容 已 经 通过 预 加 载 的 方式 注入 到 了 当前 文档 中 。 amam 
(3) pagebeforechange: 是 在 页 面 改变 期 间 触 发 的 第 一 个 事件 。 
回调 该 事件 时 ， 会 传递 两 个 参数 ， 第 一 个 参数 是 事件 ， 第 二 个 参数 779^ 
是 一 个 数据 对 象 。 通 过 调用 事件 的 preventDefault， 可 以 取消 页 面 改 
变 。 此 外 ， 通 过 检查 和 更 新 数据 对 象 ， 可 以 覆盖 页 面 改变 。 作 为 第 
二 个 参数 传递 的 数据 对 象 包含 如 下 属性 。 图 22.7 执行 效果 
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3:19 joy .00 


回 toPage(string): 一 个 文件 URL 或 一 个 jQuery 集 对 象 。 这 与 传递 给 $.mobile.changePage() 的 参数 
相同 。 

El options(object): 与 传递 给 $.mobile.changePage 的 选项 相同 。 

例如 : 

S$(document).bind("pagebeforechange" function(e,data)( 

console*log("Change page starting... "); 

e.preventDefault() ; 


D: 


(4) pagechange: 是 在 页 面 成 功 改变 之 后 触发 的 最 后 一 个 事件 。 回 调 该 事件 时 ， 会 传递 两 个 参数 ， 
第 一 个 参数 是 事件 ， 第 二 个 参数 是 数据 对 象 。 作 为 第 二 个 参数 传递 的 数据 对 象 包含 如 下 属性 。 
回 toPage(sting): 一 个 文件 URL 或 一 个 jQuery 集 对 象 。 这 与 传递 给 $.mobile.changePage0) 的 参数 
相同 。 
E] options(object): 与 传递 给 $.mobile.changePage 的 选项 相同 。 
(5) pagechangefailed: 在 页 面 更 改 失败 时 会 触发 该 事件 。 回 调 该 事件 时 ， 会 传递 两 个 参数 ， 第 一 
个 参数 是 事件 ， 第 二 个 参数 是 数据 对 象 。 作 为 第 二 个 参数 传递 的 数据 对 象 包含 如 下 属性 。 
回 toPage(string): 一 个 文件 URL 或 一 个 jQuery 集 对 象 。 这 与 传递 给 $.mobile.changePage() 的 参数 
相同 。 
E] options(object): 与 传递 给 $.mobile.changePage 的 选项 相同 。 
下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 使 用 jQuery Mobile 的 方法 和 事件 实现 页 面 跳 转 的 
方法 。 


实例 22-10: 使 用 jQuery Mobile 的 方法 和 事件 实现 页 面 跳 转 


re 源码 路 径 : 光盘 :\codes22\1.html 
tees MEE popolo — ————— 
实例 文件 1.html 的 具体 实现 代码 如 下 。 
«IDOCTYPE html> 
<html class="ui-mobile"> 
<head> 
<title>Page Title</title> 


«meta name-"viewport" content-"width-device-width, initial-scale=1"> 

<META HTTP-EQUIV-"pragma" CONTENT-"no-cache"- 

<META HTTP-EQUIV-"Cache-Control" CONTENT-"no-store, must-revalidate" 

«META HTTP-EQUIV-"expires" CONTENT-"Wed, 26 Feb 1997 08:21:57 GMT" 

«META HTTP-EQUIV-"expires" CONTENT="0"> 

«meta charset="utf-8"> 

<link rel="stylesheet" href-"http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> 
«script src-"http://code.jquery.com/jquery-1.7.1.min.js"» «/script 

«script src-"http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"» «/script» 

«script type-"text/javascript" charset-"utf-8"» 


$( document ).delegate(" index", "pageinit", function() ( 
S(document).bind( "pagebeforechange", beforechange); 
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y 

function beforechange( e, data ) ( 

if ( typeof data.toPage !- "string" ) ( 

var url = $.mobile.path.parseUrl(e.target.baseURI), 
re = /a.html/; 

if(url.href.search(re) != -1)( 

var page = $(e.target).find("&a2"); 

var d = data.options.data; 
page-.find("£s").append(decodeURIComponent(d)); 
) 

} 

} 

</script> 

</head> 


<body> 

«div data-role-"page" id="index"> 

«div data-role-"header"».header.«/div- 

«div data-role-"content"» 
-"a.html?p17112&p2-113"»a.html«/a» «br» 
ce"><a href="#c" id-"cc"» cccccc«/a» «br» «/div» 
«a href-"dir2/b.html" data-rel-"dialog" data-transition-"pop"» Open dialog«/a» 
«form action-"a.html" method-"post" 

姓名 : «input type="text" value-"23" name-"name"/» «br» 
密码 : «input type="text" value=" 过 后 " name-"pwd"/» «br 
«input type="submit" value="submit /> 

«Iform» 

</div> 

«div data-role="footer" data-position="fixed">footer</div> 
</div> 

</body> 

</html> 


实例 文件 ahtml 的 实现 代码 如 下 。 


«IDOCTYPE html» 

«html» 

<head> 

<title>Page Title</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<META HTTP-EQUIV-"pragma" CONTENT="no-cache"> 

<META HTTP-EQUIV-"Cache-Control" CONTENT-"no-store, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 
<META HTTP-EQUIV="expires" CONTENT="0"> 

<meta charset="utf-8"> 

<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> 
«script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 

«script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 


</head> 
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<body> 


<div data-role="page" id="a2" > 

<div data-role="header"> 

„header. 

</div> 

<div data-role="content"> 

«a href="../dir2/b.html" >b.html</a> 

<br> 

«a data-rel-"back" href="b.html">back</a> 
«div id="s"></div> 

</div> 

«div data-role-"footer" data-position="fixed"> 
footer 

</div> 

</div> 

</body> 

</html> 


在 jQuery Mobile 应 用 中 ， 页 面 跳 转 时 ，pagebeforechange 事件 会 被 触发 两 次 。 通 过 $(document). 
bind("pagebeforechange", handleChangePage) 来 绑 定 pagebeforechange 事件 的 触发 函数 handleChangePage 
(e.data), 第 一 次 触发 时 data.toPage 是 到 达 页 面 的 URL, 类 型 是 string: 第 二 次 触发 时 data.toPage 是 e.fn. 
e.init. 

在 第 二 次 触发 时 可 以 获取 到 达 页 面 的 信息 ， 因 此 可 以 在 第 二 次 触发 时 增加 自己 的 操作 ， 也 就 是 
if(typeof data.toPage !— "string")。 这 时 可 以 用 e.target.baseURI 来 获取 到 达 页 面 的 URI， 类 型 是 string, 
然后 就 可 以 分 析出 参数 等 。 

利用 e.target.find("pageId") 来 获取 到 达 页 的 相应 元 素 加 以 控制 。 

回 以 get 方 式 提 交 时 ， 可 以 通过 直接 解析 e.target.baseURI 来 获取 参数 。 

E] D post 方式 提交 时 ,可 以 通过 分 析 data.options.data 来 获取 参数 。 也 可 以 在 changePage 中 利用 
$("form").serializeArrayO ftf Jy. JSON 对 象 ( 这 种 方式 比较 好 ) 或 者 利用 $("form").serialize() 
转换 成 字符 串 。 

如 果 发 生 中 文 乱码 问题 ， 可 以 尝试 使 用 decodeURIComponent(str) 进 行 解码 。 

上 述 实例 代码 的 执行 效果 如 图 22-8 所 示 。 输 入 姓名 和 密码 ， 单 击 submit 按钮 后 的 效果 如 图 22-9 

所 示 。 


a.html 
cccccc 
Open dialog 
AE. 
23 
密码 
ME 
b.html 
submit back 
name-aaa&pwd-111 
22-8 ”执行 效果 图 22-9 ” 跳 转 后 传递 了 参数 
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223.6 页面 显示 /隐藏 事件 Page show/hide events 


在 jQuery Mobile 中 ,无论 页 面 是 显示 的 或 是 隐藏 的 ， 都 会 在 该 页 面 触发 两 个 事件 。 具 体 哪个 事件 
被 触发 ， 取决 于 当前 页 面 是 显示 的 还 是 隐藏 的 ， 所 以 当 页 面 转 场 发 生 时 ,实际 上 每 个 事件 都 被 触发 了 ， 
每 个 页 面 有 两 个 。 

(1) pagebeforeshow: 转 场 之 前 ， 页 面 被 显示 时 触发 。 

在 页 面 被 增强 之 后 ， 并 且 在 页 面 转换 开始 之 前 ， 该 事件 在 to 页 面 上 触发 。 回 调 该 事件 时 ， 会 传递 
两 个 参数 ， 第 一 个 参数 是 事件 ， 第 二 个 参数 是 数据 对 象 。 作 为 第 二 个 参数 传递 的 数据 对 象 包含 属性 
prePage(object)， 此 属性 表示 一 个 包含 转换 之 前 的 页 面 元 素 的 jQuery 集 对 象 。 例 如 : 

$("#o-page-id").live("pagebeforeshow",function(e,data ){ 

:onsole.log("The page transition is just starting. .."); 
D: 

(2) pagebeforehide: 转 场 之 前 ， 页 面 被 隐藏 时 触发 。 

在 转换 开始 时 ， 在 from 页 面 上 触发 。 该 事件 在 pagebeforeshow 事件 之 前 发 生 ， 而 且 只 有 当 页 面 更 
改 请 求 具有 相关 联 的 from 页 面 时 才能 触发 。 回 调 该 事件 时 ， 会 传递 两 个 参数 ， 第 一 个 参数 是 事件 ， 第 
二 个 参数 是 数据 对 象 。 作 为 第 二 个 参数 传递 的 数据 对 象 包 含 nextPage(objecb 属 性 ， 表 示 一 个 包含 要 转 
换 到 的 页 面 元 素 的 jQuery 集 对 象 。 例 如 : 

$("#from-page-id").live("pagebeforehide" function(e,data){ 

console.log("aaaaa"); 
H: 

(3) pageshow: 转 场 之 后 ， 页 面 被 显示 时 触发 。 

在 页 面 转换 完成 并 且 from 页 面 被 隐藏 之 后 ， 该 事件 在 to 页 面 上 触发 。 回 调 该 事件 时 ， 会 传递 两 个 
参数 , 第 一 个 参数 是 事件 , 第 二 个 参数 是 数据 对 象 。 作为 第 二 个 参数 传递 的 数据 对 象 包含 prevPage(object) 
属性 ， 表 示 一 个 包含 转换 之 前 的 页 面 元 素 的 jQuery 集 对 象 。 例 如 : 

$( "#to-page-id").live( "pageshow'", function(e,data)( 


conso1e.log("The page transition is complete! "); 
H: 


(4) pagehide: 转 场 之 后 ， 页 面 被 隐藏 时 触发 。 

在 页 面 转换 完成 之 后 ， 并 且 在 pageshow 事件 之 前 ， 该 事件 在 from 页 面 上 触发 ， 而 且 只 有 当 页 面 

更 改 请 求 具有 相关 联 的 from 页 面 时 才能 触发 。 回 调 该 事件 时 ， 会 传递 两 个 参数 ， 第 一 个 参数 是 事件 ， 

第 二 个 参数 是 数据 对 象 。 作 为 第 二 个 参数 传递 的 数据 对 象 包含 nextPage(object) 属 性 ， 表 示 一 个 包含 要 

转换 到 的 页 面 元 素 的 jQuery 集 对 象 。 

注意 : 上 述 4 个 事件 都 引用 了 “上 一 页 ”或 “下 一 页 ”， 这 取决 于 哪 一 页 被 显示 或 者 隐藏 ， 以 及 “上 一 
页 ”或 者 “下 一 页 ”是 否 存在 。 第 一 个 被 显示 的 page 并 没有 被 上 一 个 引用 ， 但 是 同样 会 引用 一 个 
空 的 jQuery 对 象 。 可 以 通过 将 第 二 个 参数 作为 一 个 绑 定 的 回调 函数 的 方式 访问 这 一 引用 。 例 如 : 


$(div).live(pageshow ,function(event, ui)( 
alert(This page was just hidden: '+ ui.prevPage); 
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y 
$('div').live('pagehide' function(event, ui)( 
alert(This page was just shown: '+ ui.nextPage); 
y 
而 且 ， 务 必 在 jQuery Mobile 执 行 前 绑 定 这 些 函 数 ， 以 使 它们 在 初始 化 页 面 加 载 时 被 调用 。 在 
mobileinit 事件 的 处 理 函 数 中 使 用 它们 即 可 。 


22.3.7 页面 初 始 化 事件 Page initialization events 


在 使 用 jQuery Mobile 增强 页 面 之 前 和 之 后 ， 会 触发 页 面 初始 化 事件 。 可 以 通过 绑 定 这 些 事件 ， 在 
框架 增强 页 面 之 前 对 标记 进行 预 解析 ， 或 者 在 框架 增强 页 面 之 后 设置 DOM ready 事件 处 理 程序 。 在 页 
的 生命 周期 之 内 ,这 些 事件 只 会 被 触发 一 次 。jQuery Mobile 会 自动 基于 page 内 的 增强 约定 初始 化 一 
些 插 件 。 例 如 ， 给 一 个 input 输入 框 约 定 了 type=range 属性 后 ， 会 自动 生成 一 个 自 定义 滑动 条 。 

这 些 自动 初始 化 的 行为 是 受 page 插件 控制 的 ， 它 在 执行 前 后 部 署 事件 ， 允 许 用 户 在 初始 化 前 后 操 
作 页 面 ， 甚 至 允许 用 户 自己 提供 初始 化 行为 ， 而 禁止 系统 自动 初始 化 。 下 面 介绍 的 页 面 初始 化 事件 在 
每 个 page 只 被 触发 一 次 ， 而 显示 /隐藏 事件 则 不 同 ， 在 每 次 显示 或 者 隐藏 页 面 时 都 会 被 触发 。 

(1) pagebeforecreate: 页 面 初始 化 时 ， 初 始 化 之 前 触发 。 
在 页 面 改 变 期 间 ， 该 事件 在 正在 进行 初始 化 的 页 面 上 触发 。 当 页 面容 器 已 经 被 插入 到 DOM 中 ， 
但 页 面 尚 未 被 增强 时 ， 该 事件 才 发 生 。 在 框架 增强 页 面 之 前 ， 这 是 预 解析 标记 的 首选 位 置 。 例 如 ， 在 
该 事件 中 ， 能 够 动态 创建 和 添加 虚拟 的 页 面 事件 ， 或 者 是 修改 现 有 的 数据 属性 。 
例如 : 
$("#0-page_id").live("pagebeForecreate",Function(}{ 
console.log("Pre-parse the markup before the framework enhances the widgets"); 
y 


(2) pagecreate: 页 面 初始 化 时 ， 初 始 化 之 后 触发 。 
在 页 面 改变 期 间 ， 该 事件 在 正在 进行 初始 化 的 页 面 上 触发 。 这 是 由 框架 触发 的 事件 ， 用 来 初始 化 
所 有 的 页 面 插件 。 如 果 创 建 了 自 定义 的 页 面 插 件 ， 这 将 是 对 这 些 插件 进行 初始 化 的 首选 位 置 。 
例如 : 
S(taboutPage").live('pagebeforecreate' function(event)( 
alert(This page was just inserted into the dom!); 
» 
S(taboutPage").live('pagecreate' function(event)( 
alert(This page was just enhanced by Jquery Mobile!"); 
» 
通过 绑 定 pagebeforecreate 然后 返回 false, 可 以 禁止 页 面 插件 自己 的 操作 .而 且 务必 在 jQuery Mobile 
执行 前 绑 定 这 些 函数 ， 以 使 它们 在 初始 化 页 面 加 载 时 被 调用 ,并 在 mobileinit 事件 的 处 理 函数 中 使 用 它 
们 即 可 。 
(3) pagelnit: 在 页 面 增强 结束 之 后 ， 该 事件 在 正在 初始 化 的 页 面 上 发 生 。 该 页 面 现在 处 于 DOM 


ready 状态 。 例 如 : 
© 
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$(#o-page-id").1ive("pageinit ,function(){f 
console.log("The page has been enhanced..."); 
» 


下 面 通过 一 个 具体 实例 的 实现 过 程 ， 详 细 讲 解 使 用 pagecreate 事件 创建 页 面 的 方法 。 


实例 22-11: 使 用 pagecreate 事件 创建 页 面 
源码 路 径 : 光盘 :\codes\22\creathtml 


实例 文件 creat.html 的 具体 实现 代码 如 下 。 


«*IDOCTYPE HTML» 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
«meta name="viewport" content="width=device-width,initial-scale=1"/> 
<meta charset="utf-8"> 
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/> 
«script src-"Js/jquery-1.8.3.min.js" type"text/javascript"></script> 
«script src-"Js/jquery.mobile-1.2.0.min.js" type-"text/javascript"» «/script 
«script type-"text/javascript" 
$('te1").live("pagebeforecreate" function()( 
alert(" 正 在 创建 页 面 "); 
D 
$(*te1").live("pagecreate" function()( 
alert(" 页 面 创建 完成 "); 
D» 
</script> 
</HEAD> 
<BODY> 
«div data-role-"page" id="e1"> 
«div data-role="header"><h1> 创 建 页 面 </h1></div> 
<div data-role="content"> 页 面 创建 完成 </div> 
«div data-role="footer"> 
<h4> 王 者 天 下 </h4></div> 
</div> 
</BODY> 
</HTML> 


上 述 实例 代码 在 Android 中 的 执行 效果 如 图 22-10 所 示 。 


fieyhoalhosVDJAVA 坟 轩 5005 是 【nevecnesvoovwex 攻 = ] 


file//localhos/D/JAVA X M coo: e] 


localhost localhost 


图 22-10 ”执行 效果 
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22.8.8 动画 事件 Animation events 


在 jQuery Mobile 应 用 中 提供 了 animationComplete 插件 , 其 作用 是 添加 或 删除 一 个 class 以 应 用 CSS 
转 场 效果 。 在 移动 Web 的 开发 应 用 中 ， 通 常 利用 CSS 和 animationComplete 来 实现 转 场 效果 。 

jQuery Mobile 应 用 中 的 转 场 效果 实际 上 利用 的 全 部 是 CSS， 只 有 简单 的 一 个 addClass) 和 
removeClass()。 下 面 是 带动 画 转 场 的 函数 。 


function css3TransitionHandler( name, reverse, $to, $from ) ( 
var deferred = new $.Deferred(), 

reverseClass = reverse ? " reverse" : ™, 

viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, 

doneFunc = function() ( 
S$to.add( $from ).removeClass( "out in reverse " + name ); 
if ( $from && $from[ 0] !== $to[ 0] ) { 

S$from.removeClass( $.mobile.activePageClass ); 

} 
$to.parent().removeClass( viewportClass ); 
deferred.resolve( name, reverse, $to, $from ); 


k 
S$to.animationComplete( doneFunc ); 
Sto.parent().addClass( viewportClass ); 
if ( $from ) ( 

$from.addClass( name + " out" + reverseClass ); 


$to.addClass( $.mobile.activePageClass +" " + name + " in" + reverseClass ); 


return deferred.promise(); 
) 


从 上 述 代码 中 可 以 看 到 ， 只 有 各 种 的 样式 切换 ， 除 此 以 外 别 无 他 物 。$.Deferred0 是 jQuery 提供 的 
延迟 处 理 机 制 。 上 述 函 数 的 4 个 参数 ， 分 别 是 转 场 效 果 名 称 、 是 否 回 退 、 前 一 页 面 jQ 对 象 和 目标 页 面 
jQ 对 象 。 处 理 的 逻辑 描述 起 来 也 非常 简单 。 

Ep ”是否 存在 前 一 个 页 面 ， 如 果 存 在 ， 增 加 out. 

加 ”为 目标 页 面 增加 in 和 激活 页 面 样式 。 

回 ” 当 页 面 动画 完成 后 ， 删 除 前 一 个 页 面 的 激活 样式 和 目标 页 面 的 转 场 样式 。 

接 下 来 我 们 来 看 看 CSS 部 分 。 其 实 可 以 用 一 个 transform 实现 ， 以 slide 为 例 。 

.Slide.out { 


-webkit-transform: translateX(-100%); 
-webkit-animation-name: slideouttoleft; 


) 
-slide.in ( 
-webkit-transform: translateX(0); 
-webkit-animation-name: slideinfromright; 
) 
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.Slide.out.reverse { 
-webkit-transform: translateX(100%); 
-webkit-animation-name: slideouttoright; 
} 


.Slide.in.reverse { 
-webkit-transform: translateX(0); 
-webkit-animation-name: slideinfromleft; 


} 
这 实际 上 就 是 通过 -webkit-animation-name 指定 了 一 组 动画 效果 。 


(Q-webkit-keyframes slideinfromright { 
from ( -webkit-transform: translateX(100%); ) 
to ( -webkit-transform: translateX(0); ) 

} 


@-webkit-keyframes slideinfromleft { 
from { -webkit-transform: translateX(-100%); } 
to { -webkit-transform: translateX(0); } 


} 
@-webkit-keyframes slideouttoleft { 
from ( -webkit-transform: translateX(0); } 
to ( -webkit-transform: translateX(-10096); } 
) 


(Q-webkit-keyframes slideouttoright ( 
from ( -webkit-transform: translateX(0); ) 
to ( -webkit-transform: translateX(10096); ) 
) 
所 以 ， 如 果 需 要 扩展 用 户 的 类 型 ， 只 要 按照 约定 新 增 用户 的 样式 表 就 可 以 做 到 。 另 外 ， 关 于 JQM 
转 场 内 屏 的 问题 ， 其 实 可 以 通过 下 面 的 样式 来 修正 。 
.ui-page ( 
backface-visibility: hidden; 
-Webkit-backface-visibility: hidden; /* Chrome and Safari */ 
-moz-backface-visibility: hidden; /* Firefox */ 
) 


也 就 是 说 ， 只 需要 在 页 面 元 素 中 增加 背面 不 可 见 代码 ， 就 可 以 防止 动画 发 生 时 产生 闪 屏 。 
22.3.9 触发 事件 


在 jQuery Mobile 应 用 中 构建 动态 页 面 时 ， 触 发 事件 会 比较 有 用 。 例 如 ， 可 以 调用 create 事件 为 页 
面 添加 多 个 新 的 组 件 ， 以 同时 增强 所 有 的 新 微 件 。 

trigger("create") 

通过 触发 上 述 事件 ， 可 以 自动 增强 页 面 上 的 所 有 新 元 素 。 该 事件 在 页 面 控制 器 上 被 触发 。 例 如 


e. 
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S$('«button id="b2">Button2</button>").insertAfter("#bI"); 
$('<button id="b3">Button3</button>").insertAfter("#b2"); 
$.mobile.pageContainer.trigger("create"); 
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在 jQuery Mobile 中 有 一 组 可 供 公众 使 用 的 属性 ， 这 样 用 户 无 须 编写 自己 的 jQuery Mobile 选择 器 
就 可 以 访问 常见 的 组 件 。 
(1) $.mobile.activePage: 获得 当前 处 于 活动 状态 或 者 可 见 状态 的 页 面 或 对 话 框 。 活动 页 面 被 指派 
给 由 $.mobile.activePageClass 指定 的 CSS 类 。 
(2) $.mobile.firstPage: 页 面容 器 〈$mobile pageContainer) 内 定义 的 第 一 个 页 面 。 当 不 存在 location. 
hash 值 或 者 是 禁用 了 $.mobile.hashListenillgEnabled 时 ， 会 显示 $.mobile.firstPage。 例 如 ， 在 一 个 多 页 面 
文档 中 ， 默 认 情 况 下 会 最 先 显示 $.mobile.firstPage。 
(3) $.mobile.pageContainer: 所 有 页 面 存在 的 HTML 容器 。 在 jQuery Mobile 内 ，body 元 素 是 包 
含 所 有 页 面 的 容器 。 所 有 通过 Ajax 载 入 的 页 面 ， 以 及 多 文档 页 面 中 的 所 有 内 部 页 面 都 会 存在 于 页 面容 
器 内 。 
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在 jQuery Mobile 应 用 中 ,数据 属性 提供 了 通过 简单 的 HTML 标记 来 增强 和 配置 移动 应 用 程序 的 能 
JJ o jQuery Mobile 框架 使 用 HTML 5 的 data- 属 性 来 初始 化 标记 和 配置 组 件 。 这些 属 性 全 部 都 是 可 选 的 ， 
并 且 支 持 手动 调用 插件 。 为 了 避免 命名 上 和 其 他 使 用 HTML 5 的 data- 属 性 插件 与 框架 相 冲 突 ， 可 以 使 
用 全 局 设置 来 自 定义 命名 空间 。 
有 关 jQuery Mobile 数据 属性 的 完整 信息 如 下 所 示 。 

(1) 按钮 : 通过 data-role="button" 来 标记 按钮 。 基 于 链接 的 按钮 和 表单 的 button 元 素 会 被 自动 演 

无 须 data-role 属性 。 各 个 属性 具体 取 值 的 说 明 如 下 。 


M data-corners: true | false. 


E 


M data-icon: home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r 
arrow-] | minus | refresh | forward | back | alert | info | search. 

data-iconpos: left | right | top | bottom | notext. 

data-iconshadow: true | false. 

data-inline: true | false. 

data-shadow: true | false. 

data-theme: swatch letter (a—z)« 


在 有 多 个 按钮 的 情况 下 ， 可 以 给 这 些 按钮 的 容器 添加 data-role="controlgroup" 属 性 ， 使 其 成 为 垂直 


图 
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的 按钮 组 。 或 者 添加 data-type="horizontal" 属性 ， 使 按钮 水 平 并 排 排 列 。 
(20 复 选 框 : 通过 type="checkbox" 标 记 的 input 元 素 会 自动 增强 ， 无 须 data-role 属性 。 各 个 属性 
具体 取 值 的 说 明 如 下 。 
EJ data-role: none〈 防 止 自动 增强 )。 
E] data-theme: 主题 样式 〈a 一 z) - 添加 到 表单 元 素 上 。 
(3) MAHAK: 一 个 标题 元 素 和 一 个 用 data-role="collapsible" 属 性 标记 的 容器 。 各 个 属性 具体 
取 值 的 说 明 如 下 。 
EI data-collapsed: true | false. 
E] data-content-theme: 主题 样式 (az). 
E] data-theme: 主题 样式 (a 一 z)。 
(4) 手风琴 组 : 一 个 标题 元 素 和 一 个 用 data-role="collapsible-set" 属 性 标记 的 容器 。 各 个 属性 具体 
取 值 的 说 明 如 下 。 
E] data-content-theme: 主题 样式 (a~z) - Sets all collapsibles in set. 
E] data-theme: 主题 样式 (az) - Sets all collapsibles in set. 
C5) 对 话 框 : 用 data-role="page" 属 性 标记 的 容器 , 或 者 通过 data-rel="dialog" 属 性 标记 的 链接 所 指 
向 的 容器 。 各 个 属性 具体 取 值 的 说 明 如 下 。 
data-close-btn-text: string (对话 框 的 关闭 按钮 的 文字 )。 
data-dom-cache: true | false. 
data-id: 字符 串 〈 页 面 的 ID )。 
data-fullscreen: true | false (used in conjunction with fixed toolbars). 
data-overlay-theme: 主题 样式 Ca—z) - 页 面 弹 出 对 话 框 时 蒙 版 的 主题 。 
data-theme: 主题 样式 (az). 
data-title: string (此 页 面 显示 时 的 标题 )。 
(6) 页 面 内 容 : 用 data-role="content" 属 性 标记 的 容器 ， 各 个 属性 具体 取 值 的 说 明 如 下 。 
El data-theme: 主题 样式 (a 一 z)。 
(7) Field container: 用 data-role="fieldcontain" 属 性 标记 的 容器 。 
(8) 开关 : 用 data-role="slider" 属 性 标记 的 列表 菜单 ， 只 能 有 两 个 option。 各 个 属性 具体 取 值 的 说 
明 如 下 。 
El data-role: 无 (防止 自动 增强 )。 
加 ”data-theme: 主题 样式 〈a 一 z) - 给 表单 元 素 添加 主题 样式 。 
加 ”data-track-theme: 主题 样式 (az) - 给 表单 元 素 添 加 主题 样式 。 
(9) footer: 用 data-role="footer" 属 性 标记 的 容器 ， 各 个 属性 具体 取 值 的 说 明 如 下 。 
E] data-id: 字符 串 (unique id, useful in persistent footers)» 
回 data-position: fixed. 
回 data-theme: 主题 样式 (a 一 z)。 
(10) Header: 用 data-role="header" 属 性 标记 的 容器 ， 各 个 属性 具体 取 值 的 说 明 如 下 。 
E] data-add-back-btn: true | false (只 会 在 header 自动 添加 后 退 按钮 )。 
E  data-back-btn-text: 字符 串 。 
E] data-back-btn-theme: 主题 样式 〈a 一 z)。 
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M data-position: fixed. 

E] data-theme: 主题 样式 〈a 一 z)。 

E] data-title: 字符 串 (title used when page is shown). 

(11) 链接 : 包括 用 data-role="link" 属 性 标记 的 链接 和 表单 中 的 链接 ， 各 个 属性 具体 取 值 的 说 明 


如 下 。 


data-ajax: true | false。 
data-direction: reverse (翻转 页 面 转 场 效果 )。 
data-dom-cache: true | false. 
data-prefetch: true | false. 
data-rel: back〔 后 退 到 上 一 个 历史 记录 的 页 面 ) 
dialog: 打开 对 话 框 ， 不 记录 进 历史 记录 中 。 
external: for linking to another domain。 
data-transition: slide | slideup | slidedown | pop | fade | flip。 
12) 列表 : 用 data-role="listview" 属 性 标记 的 ol 或 由， 各 个 属性 具体 取 值 的 说 明 如 下 。 
data-count-theme: 主题 样式 (a 一 z)。 
data-dividertheme: 主题 样式 〈a 一 z)。 
data-filter: true | false. 
data-filter-placeholder: string. 
data-filter-theme: 主题 样式 〈a 一 z)。 
data-inset: true | false. 
data-split-icon: home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r 
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arrow-l | minus | refresh | forward | back | alert | info | search 。 
El data-theme: 主题 样式 (a~z)o 
(3) 列表 项 : 列表 中 的 1i， 各 个 属性 具体 取 值 的 说 明 如 下 。 
E] data-icon: home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r 
arrow-l | minus | refresh | forward | back | alert | info | search. 
EI data-role: list-divider. 
E] data-theme: 主题 样式 Ca—z) - can also be set on individual LIs。 
(14). 页 面 : 用 data-role="page" 属 性 标记 的 容器 ， 各 个 属性 具体 取 值 的 说 明 如 下 。 
data-close-btn-text: string〈 对 话 框 的 关闭 按钮 的 文字 )。 
data-dom-cache: true | false。 
data-id: string (页 面 的 唯一 id)。 
data-fullscreen: true | false (used in conjunction with fixed toolbars)。 
data-overlay-theme: 主题 样式 〈a 一 z) - overlay theme when the page is opened in a dialogs 
data-theme: 主题 样式 〈(a 一 z)。 
data-title: string (页 面 显示 时 的 标题 )。 
(15) 单 选 按钮 : 用 data-role="radio" 属 性 标记 的 容器 ， 各 个 属性 具体 取 值 的 说 明 如 下 。 
回 data-role: none( 防 止 自动 增强 )。 
El data-theme: 主题 样式 〈a 一 z) -加 到 表单 元 素 上 。 
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(16) 列表 菜单 : select 的 列表 菜单 会 被 自动 增强 ,无 须 data-role 属性 。 各 个 属性 具体 取 值 的 说 明 
如 下 。 


回 


data-icon: home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | 
arrow-] | minus | refresh | forward | back | alert | info | search. 
data-iconpos: left | right | top | bottom | notext. 
data-inline: true | false. 
data-native-menu: true | false. 
data-overlay-theme: 主题 样式 (az) - 蒙 版 的 主题 样式 。 
data-placeholder: true | false - 加 到 option 上 。 
data-role: none〔( 防 止 自动 增强 )。 
data-theme: 主题 样式 〈a 一 z) - 加 到 表单 元 素 上 。 
(17) 滑 杆 : type="range" 属 性 标记 的 input 元 素 会 被 自动 增强 ， 无 须 data-role 属性 。 各 个 属性 具 
体 取 值 的 说 明 如 下 。 
E] data-role: none (防止 自动 更 新 )。 
加 ”data-theme: 主题 样式 〈a 一 z) - 加 到 表单 元 素 上 。 
回 data-track-theme: 主题 样式 〈a 一 z) - 加 到 表单 元 素 上 。 
(18) 文本 框 和 文本 域 : type="textlnumberlsearch| 等 类 型 的 文本 框 或 者 文本 域 会 自动 增强 ， 无 须 
data-role 属性 。 各 个 属性 具体 取 值 的 说 明 如 下 。 
E] data-role: none 防止 自 动 更 新 )。 
E] data-theme: 主题 样式 (a 一 z) - 加 到 表单 元 素 上 。 
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jQuery Mobile 为 HTML 元 素 提供 了 可 以 模拟 浏览 器 水 平 、 竖 直方 向 的 类 ， 以 及 常用 的 最 大 宽度 
CSS 媒介 查询 class。 这 些 class 会 在 加 载 、 调 整 大 小 以 及 方向 变化 时 更 新 ， 使 用 户 能 够 在 CSS 中 切断 
这 些 class， 以 创建 有 响应 的 布局 ， 即 使 在 不 支持 媒介 查询 的 浏览 器 中 也 可 以 实现 。 
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22.6.1 方向 类 Orientation Classes 


方向 类 取决 于 浏览 器 或 者 设备 的 方向 ，HTML 元 素 包 括 portrait CB) ~ landscape (WRO 两 个 
class。 可 以 在 CSS 中 使 用 它们 。 


.portrait ( 

垂直 方向 变化 的 代码 */ 
} 

landscape ( 

广 水 平方 向 变化 的 代码 */ 
} 


e. 
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22.6.2 最 小 /最 大 宽度 折断 点 类 Min/Max Width Breakpoint Classes 


在 默认 情况 下 ， 为 如 下 宽度 创建 了 折断 : 320、480、768、1024。 这 些 宽度 对 应 着 如 同 "min-width- 
320px"、"max-width-480px" 的 class， 意 味 着 这 些 class 可 以 应 用 在 蔡 换 〈 或 附加 ) 它们 模拟 的 等 值 的 媒 
介 查 询 。 例 如 : 


.myelement { 
float: none; 

} 

.min-width-480px .myelement { 
float: left; 


) 


jQuery Mobile 中 的 许多 插件 都 利用 了 这 些 宽度 折断 点 。 例 如 ， 当 浏览 器 宽度 在 ASOpx 以 上 时 ， 表 
单元 素 会 浮动 在 label 的 旁边 ， 约 束 表单 文本 框 的 CSS 在 支持 这 样 的 行为 时 类 似 以 下 代码 。 


label.ui-input-text { 
display: block; 

) 

.min-width-480px label.ui-input-text { 
display: inline-block; 

) 


22.6.3 ”添加 宽度 折断 点 Adding Width Breakpoints 


要 利用 自己 的 宽度 折断 点 ，jQuery Mobile 公开 了 $.mobile.addResolutionBreakpoints 函数 ， 该 函数 
接受 一 个 数字 或 者 数字 的 数组 ， 这 些 值 在 函数 中 被 应 用 到 时 ， 会 被 添加 到 min/max 折断 点 中 。 例 如 : 

/添加 一 个 1200px 的 最 大 /最 小 折断 点 

$.mobile.addResolutionBreakpoints(1200); 


咱 添 加 一 个 1200px 和 1440px 两 个 最 大 /最 小 折断 点 
$.mobile.addResolutionBreakpoints([1200, 1440]); 


22.6.4 ”运行 媒介 查询 Running Media Queries 


在 jQuery Mobile 中 提供 了 一 个 函数 ， 人 允许 用 户 测试 是 否 有 特殊 的 CSS 媒介 查询 生效 ， 只 需 调用 
$.mobile.media0， 然 后 传递 一 个 media type 或 query 即 可 。 如 果 浏 览 器 支持 传递 的 type 或 query， 它 会 
立即 生效 ， 函 数 会 返回 tue， 和 否则 会 返回 false。 例 如 : 

/测试 屏幕 媒体 类 型 

$.mobile.media("screen"); 

/测试 最 小 宽度 的 媒介 查询 

$.mobile.media("screen and (min-width: 480px)"); 

// 测 试 是 否 为 苹果 4 代 手 机 的 屏幕 〈 视 网 膜 ) 

$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)"); 
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第 23 章 使 用 PhoneGap 


PhoneGap 是 一 个 基于 HTML. CSS 和 JavaScript 的 技术 ， 是 一 个 创建 跨 平 台 移 动 应 用 程序 的 快速 
开发 平台 。 它 使 开发 者 能 够 利用 iPhone. Android. Palm. Symbian. WP7. Bada 和 BlackBerry 等 智能 
手机 的 核心 功能 ,包括 地 理 定位 、 加 速 器 、 联 系 人 、 声 音 和 振动 等 ， 此 外 PhoneGap 拥有 丰富 的 插件 ， 
可 以 以 此 扩展 无 限 的 功能 。 本 章 将 详细 讲解 PhoneGap 的 基本 知识 ， 为 读者 学 习 本 书后 面 的 知识 打下 
基础 。 


23.1 PhoneGap 简介 
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PhoneGap 是 一 个 免费 的 开发 平台 ， 需 要 特定 平台 提供 的 附加 软件 ， 如 iPhone 的 iPhone SDK、 
Android 的 Android SDK 等 ， 也 可 以 和 Dreamweaver 5.5 及 以 上 版 本 配套 开发 。 使 用 PhoneGap 只 比 为 
每 个 平台 分 别 建立 应 用 程序 稍 好 ， 因 为 虽然 基本 代码 是 一 样 的 ， 但 是 开发 者 仍然 需要 为 每 个 平台 分 别 
编译 应 用 程序 。 本 节 将 简要 讲解 PhoneGap 的 基本 知识 。 


23.1.1 产生 背景 


随 着 智能 移动 设备 的 快速 普及 以 及 Web 技术 (特别 是 HTML 5 技术 ) 的 飞速 发 展 ，Web 开发 人 员 
将 不 可 避免 地 碰 到 这 一 问题 : 怎样 在 移动 设备 上 将 HTML 5 应 用 程序 作为 本 地 程序 运行 ? 与 传统 PC 
机 不 同 的 是 ， 智 能 移动 设备 完全 是 移动 应 用 的 天 下 ， 那 么 Web 开发 人 员 如 何 利 用 自己 熟悉 的 技术 (如 
Objective-C 语言 ) 来 进行 移动 应 用 开发 ， 而 不 用 花费 大 量 的 时 间 来 学 习 新 技术 呢 ? 在 手机 浏览 器 上 ， 
用 户 必须 通过 打开 超 链接 来 访问 HTML 5 应 用 程序 ， 而 不 能 像 访问 本 地 应 用 程序 那样 ， 仅 通过 单 击 一 
个 图 标 就 能 得 到 想 要 的 结果 ， 尤 其 是 当 移动 设备 脱 机 以 后 ， 用 户 几 乎 无 法 访问 HTML 5 应 用 程序 。 

当前 移动 应 用 市 场 已 经 初步 形成 了 10S. Android 和 Windows Phone 三 大 阵营 ， 当 然 其 余 的 传统 阵 
营 Cli Symbian 和 RIM 等 ) 凭借 历史 原因 和 庞大 的 用 户 基数 也 不 容 小 山 。 随 着 移动 应 用 市 场 的 迅 狐 发 
展 ， 越 来 越 多 的 开发 者 也 加 入 到 了 移动 应 用 开发 的 大 军 当 中 。 

目前 ，Android 应 用 是 基于 Java 语言 进行 开发 的 ， 苹 果 公 司 的 ios 应 用 是 基于 Objective-C 语言 
发 的 ， 微 软 公 司 的 Windows Phone 应 用 则 是 基于 C# 语 言 开发 的 。 如 果 开 发 者 编写 的 应 用 要 同时 在 不 同 
的 移动 设备 上 运行 ， 则 必须 掌握 多 种 开发 语言 ， 但 这 必 将 严重 影响 软件 开发 进度 和 项 目 上 线 时 间 ， 并 
且 已 经 成 为 开发 团队 的 一 大 难题 。 

为 了 进一步 简化 移动 应 用 开发 ， 很 多 公司 已 经 推出 了 相应 的 解决 方案 。Adobe 推出 的 AIR Mobile 
技术 ， 能 使 Flash 开发 的 应 用 同时 发 布 到 iOS, Android 和 BlackBerry 的 Playbook 上 。Appcelerator A 
司 推出 的 Titanium 平台 能 直接 将 Web 应 用 编译 为 本 地 应 用 运行 在 iOS 和 Android 系统 上 。 而 Nitobi 公 
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司 ( 现 已 被 Adobe 公司 收购 ) 也 推出 了 一 套 基于 Web 技术 的 开源 移动 应 用 解决 方案 : PhoneGap。2008 
年 夏天 ，PhoneGap 技术 面世 。 从 此 ， 开 发 移动 应 用 有 了 一 项 新 的 选择 。 


23.1.2 什么 是 PhoneGap 


PhoneGap 是 目前 唯一 支持 7 种 平台 的 开源 移动 开发 框架 ， 支 持 的 平台 包括 10S. Android, 
BlackBerry、Palm WebOS、Windows Phone 7. Symbian 和 Bada. PhoneGap 是 一 个 基于 HTML、CSS 
和 JavaScript 的 创建 跨 平台 移动 应 用 程序 的 快速 开发 平台 。 与 传统 Web 应 用 不 同 的 是 ， 它 使 开发 者 能 
够 利用 iPhone. Android 等 智能 手机 的 核心 本 地 功能 , 包括 地 理 定位 、 加 速 器 、 联 系 人 、 声 音 和 振动 等 ， 
此 外 它 还 拥有 非常 丰富 的 插件 ， 并 可 以 凭借 其 轻 量 级 的 插件 式 架 构 来 扩展 无 限 的 功能 。 

PhoneGap 是 免费 的 ， 但 是 需要 特定 平台 提供 的 附加 软件 ， 如 iPhone 的 iPhone SDK、Android 的 
Android SDK 等 ,也 可 以 和 Adobe Dreamweaver 5.5 及 以 上 版 本 配套 开发 。 另 外 ， 使 用 PhoneGap， 需 要 
为 每 个 平台 分 别 编译 不 同 的 应 用 程序 。 当然, 也 可 以 使 用 PhoneGap 的 在 线 编译 云 服 务 PhoneGap Build， 
可 免 去 准备 各 种 编译 环境 。 

利用 PhoneGap Build, 可 以 在 线 打 包 Web 应 用 成 客户 端 并 发 布 到 各 移动 应 用 市 场 。 有 了 PhoneGap 
和 PhoneGap Build, Web 开发 人 员 便 可 以 利用 他 们 非常 熟悉 的 JavaScript, HTML 和 CSS 技术 ,或 者 
结合 移动 Web UI 框架 jQuery Mobile, Sencha Touch 来 开发 跨 平台 移动 客户 端 ， 还 能 非常 方便 地 发 布 
程序 到 不 同 移动 平台 上 。 


23.4.8 PhoneGap 的 发 展 历程 


2008 年 8 月 ，PhoneGap 在 旧金山 举办 的 iPhoneDevCamp 上 加 露 头角。 起 名 为 PhoneGap 是 创始 人 
的 想法 : 为 跨越 Web 技术 和 iPhone 之 间 的 鸿沟 牵线 搭桥 。 

2009 年 2 H 25 H, PhoneGap 0.6 发 布 ， 这 是 第 一 个 稳定 版 ， 支 持 iOS、Android 和 BlackBerry 平台 。 

2009 年 8 月 一 2010 年 7 月 ，PhoneGap 实现 了 对 Windows Mobile. Palm, Symbian 平台 的 支持 ， 
支持 平台 达到 6 个 。 

2010 4 10 H 4 H , Adobe 公司 宣布 收购 创建 了 HTML 5 移动 应 用 框架 PhoneGap 和 PhoneGap Build 
的 新 创 公 司 Nitobi Software。Adobe 表示 ， 收 购 PhoneGap 后 ， 开 发 者 便 可 选择 在 PhoneGap 平台 使 用 
HTML. CSS fll JavaScript 创建 移动 应 用 程序 ， 也 可 选择 使 用 Adobe Air 和 Flash. 

随后 ，Adobe 把 PhoneGap 项 目 捐 给 了 Apache 基金 会 ， 但 保留 了 PhoneGap 的 商标 所 有 权 。 

2011 年 7 月 29 H, PhoneGap 发 布 了 1.0 版 ， 其 中 加 入 了 不 少 访问 本 地 设备 的 API。 

2011 年 10 月 1 H, PhoneGap 发 布 了 1.1 版 ， 新 功能 包括 支持 BlackBerry PlayBook 的 WebWorks 
并 入 、orientationchange 事件 和 媒体 审查 等 。 

2011 年 11 月 7 日 PhoneGap 1.2 版 发 布 ， 开 始 正 式 支持 Windows Phone 7， 支 持 的 平台 数 达 到 了 
TE 

2011 年 12 月 19 H, PhoneGap 团队 与 微软 发 布 了 1.3 版 ， 对 iOS, Android 与 RIM 进行 了 一 些 增 
强 , 同时 还 为 Windows Phone 7 提供 了 可 用 于 产品 的 特性 集 , 包括 完整 的 API 支持 、 更 棒 的 Visual Studio 
模板 、 文 档 、 指 南 、bug 修复 以 及 大 量 插件 。 

在 成 为 Apache Incubator 项 目 后 ，PhoneGap 已 经 更 名 为 Apache Callback. 1.4 版 发 布 后 ， 名 字 再 次 
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变更 为 Cordova. Cordova 其 实 是 PhoneGap 团队 附近 一 条 街 的 名 字 。 


注意 : PhoneGap 和 Cordova 的 关系 和 区 别 。 
Cordova 是 Adobe 捐 献 给 Apache 的 项 目 ， 是 一 个 开源 的 、 核 心 的 跨 平台 模 


块 。PhoneGap 是 Adobe 的 一 


项 商业 产品 。Cordova 和 PhoneGap 的 关系 类 似 于 WebKit 与 Chrome 或 者 Safari 的 关系 。PhoneGap 还 包 


括 一 些 额外 的 商用 组 件 ， 如 PhoneGap Build 和 Adobe Shadow。 


23.4.4 全 新 的 功能 


PhoneGap 的 更 新 速度 非常 快 ，2013 年 6 月 26 日 ，PhoneGap 发 布 了 2.9.0 版 产品 。 在 这 个 最 新 的 


版 本 中 ，PhoneGap 在 多 个 主要 的 智能 手机 设备 上 提供 了 以 下 功能 的 支持 。 
nit. 


通知 ， 如 警告 、 声 音 和 振动 。 
存储 。 
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如 果 正 在 为 iPhone 或 Android 设备 做 开发 ， 那 么 这 些 功 能 都 是 支持 的 。 如 果 是 为 BlackBerry、 
WebOS、Windows Phone 7, Symbian 或 Bada 设备 做 开发 , 则 有 些 功能 就 不 支持 了 。 例 如 在 Windows Phone 


7 上 ， 不 支持 摄像 头 、 罗 盘 和 存储 功能 。 未 来 发 行 版 本 的 路 线 图 包括 对 Cont 
到 最 新 的 W3C 规范 。 此 外 ，PhoneGap 计划 支持 如 下 所 示 的 功能 。 

加 密 。 

WebSockets。 

Web 通知 。 

HTML 媒体 捕获 。 

Calendar API. 

国际 化 支持 。 

命令 行 编译 。 

网 损 /恢复 事件 。 


23.1.5 PhoneGap 移动 Web 开发 的 步骤 
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act API 的 升级 ， 将 其 更 新 


到 目前 为 止 ， 常 用 的 基于 Web 技术 的 移动 应 用 开发 技术 有 RhoMobile, Titanium Mobile fil PhoneGap。 


与 前 两 种 技术 相 比 ， 利 用 PhoneGap 可 以 从 标准 的 Web 应 用 开始 进行 构建 了 
的 移动 开发 应 用 的 基本 步骤 如 下 。 


e. 


LíE. PhoneGap 基于 Web 
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(1) 基于 HTML, CSS 和 JavaScript 构建 标准 的 Web 应 用 。 
在 手机 上 访问 Web 应 用 有 两 种 形式 ， 具 体 说 明 如 下 。 


[a 


通过 浏览 器 来 访问 应 用 ， 即 发 布 Web 应 用 到 一 个 服务 器 后 ， 通 过 手机 浏览 器 访问 服务 器 的 网 
址 。 这 种 方式 虽然 部 署 简单 ， 但 是 可 能 得 不 到 很 好 的 用 户 体验 ， 不 同 移动 设备 的 显示 效果 不 
同 ， 并 且 无 法 访问 手机 的 原生 功能 和 设备 信息 。 

基于 Web 的 移动 原生 程序 , 使 用 WebView 来 显示 页 面 。 这 种 方式 有 更 好 的 用 户 体 验 , 针对 移 
动 平 台 进行 优化 而 且 充分 利用 手机 的 特性 ， 如 根据 屏幕 的 大 小 来 调整 元 素 的 布局 和 样式 。 它 
们 都 利用 基础 的 Web 技术 : HTML. CSS 和 JavaScript， 因 此 移动 Web 应 用 程序 可 以 在 传统 
Web 应 用 的 基础 上 进行 开发 ， 然 后 针对 手机 平台 做 一 些 优化 。 


(2) 准备 开发 环境 。 

到 目前 为 止 ， PhoneGap 支持 7 个 平台 ,分别 是 Android. iOS. Windows Phone 7. Palm WebOS、 
BlackBerry. Symbian 和 Bada。 在 后 面 的 内 容 中 ， 将 以 Android 平台 为 例 ， 讲 述 如 何在 Android 系统 上 
利用 PhoneGap 快速 构建 移动 Web 应 用 的 知识 。 

对 于 开发 环境 的 选择 ， 建 议 采用 集成 的 IDE， 如 Eclipse， 也 可 以 采用 命令 行 方式 ， 利 用 Notepad 
或 者 TextEdit 编辑 代码 。 

(3) 利用 PhoneGap 进行 包装 。 

PhoneGap 的 主要 用 途 就 是 提供 访问 手机 原生 功能 和 设备 信息 的 API， 所 有 的 API 都 是 基于 

JavaScript 的 ， 因 此 第 一 步 创建 的 Web 应 用 可 以 集成 PhoneGap 的 功能 ， 成 为 原生 程序 。 
(4) 打包 成 不 同 移动 平台 的 原生 程序 。 

PhoneGap 其 实 为 每 一 个 支持 的 平台 提供 了 一 个 模板 ， 只 要 Web 程序 实现 了 该 平台 模板 要 求 的 功 

能 ， 就 能 打包 成 该 平台 的 原生 应 用 程序 。 


232 ”搭建 PhoneGap 开发 环境 


Gh 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 23 章 \ 搭 建 PhoneGap 开发 环境 .avi 
在 使 用 PhoneGap 进行 移动 Web 开发 之 前 ， 需 要 先 搭建 PhoneGap 开发 环境 。 本 节 将 详细 讲解 搭建 
PhoneGap 开发 环境 的 基本 知识 。 


23.2.1 


准备 工作 


在 安装 PhoneGap 开发 环境 之 前 ， 需 要 先 安装 如 下 所 示 的 框架 。 
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Java SDK. 
Eclipse. 
Android SDK. 
ADT Plugin. 


23.22 ”获得 PhoneGap FRE 


PhoneGap 2.9.0 版 获得 PhoneGap 开发 包 的 基本 流程 如 下 。 
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(1) 登录 PhoneGap 的 官方 网 站 http://phonegap.com/download/， 如 图 23-1 所 示 。 


Download & Archives 


PhoneGap 2.9.0 Getting Started Guides 
PhoneGap API Docs. 


PhoneGap Wiki 


Google Groups 


Archives. 


图 23-1 PhoneGap 的 官方 网 站 


(2) 单 击 最 新 版 本 下 方 的 EB 按钮 下 载 PhoneGap 开发 包 ， 下 载 成 功 后 的 压缩 包 名 为 
phonegap-2.9.0.zip。 

G) 解压 缩 文 件 phonegap-2.9.0.zip， 假 设 解压 到 本 地 硬盘 的 D 目录 下 ,解压 后 的 根 目录 名 是 
phonegap-2.9.0， 双 击 打开 后 的 效果 如 图 23-2 所 示 。 
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图 23-2 phonegap-2.9.0 的 根 目录 


对 图 23-2 中 各 个 子 目录 的 具体 说 明 如 下 。 

doc: 其 中 包含 PhoneGap 的 源 代码 文档 ， 如 图 23-3 所 示 。 

lib: 其 中 包含 PhoneGap 支持 的 各 种 平台 ， 如 图 23-4 所 示 。 

changelog: 一 个 日 志文 件 ， 保 存 了 更 改 历史 记录 信息 和 作者 信息 等 。 

LICENSE: Apache 软件 许可 证 (v2 版 本 )。 

VERSION: 版 本 信息 。 

README.md: 帮助 文档 。 

-gitignore: 对 于 项 目 中 产生 的 中 间 文 件 、 测 试 文件 、 可 执行 文件 等 ， 这 类 不 需要 被 git 所 监控 
的 文件 ， 都 可 以 使 用 .gitignore 进行 忽略 设 定 。 
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23-3 doc 文件 夹 内 容 
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23-4 lib 文件 夹 内 容 
23.23 ”创建 基于 PhoneGap 的 HelloWorld 程序 


下 面 创建 第 一 个 PhoneGap-Android 原生 程序 HelloWorld。 


K 实例 23-1: 创建 第 一 个 PhoneGap-Android 原生 程序 
源码 路 径 : 光盘 :\codes\23\HelloWorld' 


首先 ， 利 用 HTML. CSS 和 JavaScript 来 搭建 一 个 标准 的 Web 应 用 程序 ， 然 后 用 PhoneGap 封装 
来 访问 移动 设备 的 基本 信息 ， 在 Android 模拟 器 上 调试 成 功 后 ， 最 后 部 署 到 实体 机 。 为 了 在 不 同 的 设 
备 上 得 到 一 样 的 泻 染 效果 ， 将 采用 jQuery Mobile 来 设计 应 用 程序 界面 。 


1. 建立 一 个 基于 Web 的 Android 应 用 


创建 标准 Android 应 用 的 操作 步骤 如 下 。 
(1) 启动 Eclipse， 依 次 选择 File? New— Other 命令 ， 然 后 在 向 导 的 树 形 结构 中 找到 Android 节点 。 
单 击 Android Project， 在 项 目 名 称 中 输入 HelloWorld。 
(2) 单 击 Next 按钮 ， 选 择 目 标 SDK， 在 此 选择 2.3.3。 单 击 Next 按钮 ， 在 其 中 填写 包 名 com.adobe. 


phonegap， 如 图 23-5 所 示 。 
© 


Mew Android Project. 


Creates a ner Android Project resource. 


Axdroié Open Source Treject 
Mrdroié Open Source Project 
Madroié Opan Sourse Frs 

Axdroié Open Source Ireject. 


Android Open Source Treject 
Geogle Tac. 

Simeone Tetronies Co., Let 
Android Open Source Treject 
Geogle Iac. 


图 23-5 创建 Android 工程 


(3) 单 击 Finish 按钮 ， 此 时 将 成 功 构建 一 个 标准 的 Android 项 目 。 如 图 23-6 所 示 为 当前 项 目的 目 


录 结 构 。 


-£ con. adobe. pereo 
[D Ferdotertbetiv y jara 
EB em [eenerated Java Files] 


defuit proper tien 


1 package com.adobe.phonegap; 
2 
taport android.app.Activizy:[] 
5 
6 public class Relicieridāctivity extende Acriviry Ü 
j** Called when rhe activity ís first created. */ 
override 
public void orCreace (Bundle savedinstanceStaze] | 
Super.onCreate (savedirstanceSzate): 
seccontentview(R. layour.main); 


[2013-97-14 14:46:02 - HelloWorld] Project has zo defaulr.propt 
[2013-07-14 14:52:02 - com.android.ide.cclipse.adr.interaal.prc 


图 23-6 创建 的 Android 工程 
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$235 使 用 PhoneGap —— 


2. 添加 Web 内 容 


在 HelloWorld 中 ， 将 要 添加 的 Web 页 面 只 有 index.html， 该 页 面 要 完成 的 功能 是 在 内 容 区 域 输出 
HelloWorld。 为 了 确保 在 不 同 的 移动 平台 上 显示 一 样 的 效果 ， 使 用 jQuery Mobile 来 设计 UI. 
(1) Æ HelloWorld 的 assets 目录 下 创建 www 文件 夹 ， 该 文件 夹 是 所 有 Web 内 容 的 容器 。 
(2) 下 载 jQuery Mobile， 笔 者 在 此 实例 使 用 的 版 本 是 1.1.0 RC1。 除 了 需要 jQuery Mobile 的 CSS 
和 相关 JavaScript 文件 外 ， 还 需要 用 到 jquery js. 
(3) 下 载 完 jQuery Mobile 并 解压 缩 后 ， 将 jquery.mobile-lO.min.css. jquery.mobile-l.0.min.js 和 
jquery.js 放置 在 www 文件 夹 下 ， 如 图 23-7 所 示 。 
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23-7 添加 jQuery Mobile 文件 


(4) 开始 编写 文件 index.html， 该 页 面 是 个 单 页 结构 ， 共 包含 3 部 分 ， 分 别 是 页 头 、 内 容 和 页 脚 。 
文件 index.html 的 具体 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>index.html</title> 
«link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" /> 
«script type-"text/javascript" charset-"utf-8" src="jquery.js"></script> 
«script type-"text/javascript" charset-"utf-8" src-"jquery.mobile-1.0.1.min.js"» «/script» 
</head> 
<body> 
<l-- begin first page — 
«div id-"page1" data-role-"page" > 
*header data-role-"header"» «h1»Hello World</h1></header> 
<div data-role-"content" class-"content" 
<h3> 设 备 信息 </h3> 


</ul> 

</div> 

«footer data-role="footer"><h1>Footer</h1></footer> 
</div> 

<l-- end first page --> 

</body> 

</html> 


目前 ， 该 页 面 无 法 显示 在 移动 设备 中 ， 它 在 桌面 浏览 器 上 的 显示 效果 如 图 23-8 所 示 。 
3. 利用 PhoneGap 封装 成 移动 Web 应 用 


整个 封装 过 程 可 以 分 为 如 下 所 示 的 4 部 分 。 
回 第 1 部 分 : 修改 项 目 结构 ， 即 创建 一 些 必要 的 目录 结构 。 
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回 第 2 部分: 引入 PhoneGap 相关 文件 ,包含 cordova.js 和 cordova.jar， 其 中 cordova.js 主要 用 于 

HTML 页 面 ， 而 cordova.jar 作为 Java 库 文件 引入 。 

回 第 3 部 分 : 修改 项 目 文件 (包含 HTML 页 面 和 activity 类 文件 )。 

回 第 4 部 分 : 是 可 选 的 ， 即 修改 项 目 元 数据 AndroidManifestxml， 可 以 根据 实际 需要 来 修改 该 
配置 文件 。 


XP) SED EV PEO PED IAV Who» 
| 加 XM 主页。 | 加 thene6wp 包 … | 中 基于 stroi | [C] Phonesat: 
&-5-6- file: ///U: /vcrkspacel /WelloRorld/ass 
L XMEXAA 加 访问 最 多 二; 新 手 上 路 RARE 

Hello World 


设备 信息 


EBEV«Fm&O, 
23-8 文件 index.html 的 执行 效果 
下 面 将 逐一 介绍 每 一 部 分 的 具体 实现 过 程 。 
COD 修改 项 目 结构 。 
在 项 目的 根 目 录 下 创建 libs 和 assetswww 文件 夹 ， 前 者 是 将 要 添加 的 cordova.jar 包 的 容器 ， 后 者 
(该 文件 夹 在 添加 Web 内 容 时 创建 ) 是 Web 内 容 的 容器 。 
(2) 引入 PhoneGap 相关 文件 。 

在 前 面 已 经 下 载 了 最 新 的 PhoneGap 发 布 包 2.9.0。 进 入 发 布 包 的 \libvandroid 目录 ,将 文件 cordova.js 
复制 到 assets\www 目录 下 ， 将 cordova-2.9.0.jar 库 文件 复制 到 libs 目录 下 ， 将 XML 文件 夹 复制 到 res 
目录 下 ,作为 res 目录 的 一 个 子 目 录 。 在 PhoneGap 2.0 以 前 ,XML 文件 夹 包含 两 个 配置 文件 : cordova.xml 
和 plugins.xml， 从 2.0 开始 , 这 两 个 文件 合并 成 一 个 一 一 config.xml。 修改 项 目的 Java 构建 路 径 , 把 libs 
下 的 cordova-2.9.0.jar 添加 到 编译 路 径 中 。 

G) 修改 项 目 文件 。 

修改 默认 的 Java 文件 HelloWorldActivity， 使 其 继承 DroidGap， 修 改 后 的 代码 如 下 。 

package com.adobe.phonegap; 

import org.apache.cordova.DroidGap; 

import android.app.Activity; 

import android.os.Bundle; 

public class HelloWorldActivity extends DroidGap ( 

/** Called when the activity is first created. */ 
(QOverride 
public void onCreate(Bundle savedinstanceState) ( 


super.onCreate(savedlInstanceState); 
super.loadUrl("file:///android asset/www/index.html"); 
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在 上 述 代 码 中 , DroidGap 是 PhoneGap 提供 的 , 此 类 继承 自 android.app.Activity 25. 如 果 需 要 PhoneGap 
提供 的 API 访问 设备 的 原生 功能 或 者 设备 信息 ， 则 需要 在 index.html 的 <header> 标 签 中 加 入 如 下 代码 。 


«script type-"text/javascript" charset-"utf-8" src-"cordova.js" > 
在 本 例 中 ， 先 实验 一 下 不 引入 cordovajs 时 的 情况 ， 此 时 在 模拟 器 上 的 运行 效果 如 图 23-9 所 示 。 


Hello World 


Footer 


MIPE TETI E a E m UT 


图 23-9 不 引入 cordova.js 时 的 执行 效果 


现在 修改 文件 index.html， 将 文本 Iam here 蔡 换 为 显示 设备 信息 。 更 改 后 的 index.html 页 面 的 代码 
如 下 。 


«IDOCTYPE html» 

«html» 

<head> 
«meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>index.html</title> 
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" /> 
«script type-"text/javascript" charset-"utf-8" src="jquery.js"></script> 
«script type-"text/javascript" charset-"utf-8" src-"jquery.mobile-1.0.1.min.js"» «/script» 
«script type-"text/javascript" charset-"utf-8" src-"cordova.js" ></script> 
«script type-"text/javascript" charset-"utf-8"» 


$( function() ( 


» 
S$(document).ready(function()( 


console.log("jquery ready"); 
document.addEventL istener("deviceready", onDeviceReady, false); 
console.log("register the listener"); 


b 


function onDeviceReady() 
t 
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fi. 
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console.log("onDeviceReady^); 

S$(".content").html("«ul 
data-role-'listview'» «li» "device.name*"«/li» «li» "*device.cordova*"«/li» «li»"*device.platform*"«/li» «li» "-devic 
e.version*"«/li» «li» "*-device.uuid-"«/li» «/ul»"); 


} 


</script> 
</head> 
<body> 
<l-- begin first page —> 
«div id-"page1" data-role-"page" > 
*header data-role-"header"» «h1»Hello World«/h1»«/header- 
«div data-role-"content" class-"content" 
<h3> 设 备 信息 </h3> 


«Iul» 

</div> 

«footer data-role="footer"><h1>Footer</h1></footer> 
</div> 

<l-- end first page --> 

</body> 

</html> 


在 上 述 代码 中 ,使 用 函数 onDeviceReadyO 调 用 $(".content").html0 函 数 来 修改 div 中 的 HTML 内 容 。 
4. 修改 权限 文件 AndroidManifest.xml 


在 文件 AndroidManifest.xml 中 ， 增 加 访问 网 络 和 照相 机 的 权限 ， 并 添加 适用 不 同 分 辩 率 的 设置 代 
文件 AndroidManifest.xml 的 具体 代码 如 下 。 


<?xml version="1.0" encoding="utf-8"?> 

«manifest xmIns:android-"http://schemas.android.com/apk/res/android" 
package-"com.adobe.phonegap" 
android:versionCode-"1" 
android:versionName-"1.0"7 


«supports-screens android:largeScreens-"true" android:normalScreens-"true" android:smallScreens-"true" 

android:resizeable-"true" android:anyDensity-"true" /> 

«uses-permission android:name-"android.permission. CAMERA" /> 

«uses-permission android:name-"android.permission. VIBRATE" /> 

«uses-permission android:name-"android.permission.ACCESS  COARSE LOCATION" /> 

«uses-permission android:name-"android.permission.ACCESS FINE LOCATION" /> 

«uses-permission android:name-"android.permission.ACCESS LOCATION EXTRA COMMANDS" /> 

«uses-permission android:name-"android.permission.READ PHONE. STATE" /> 

*uses-permission android:name-"android.permission.INTERNET" /> 

«uses-permission android:name-"android.permission. RECEIVE SMS" /> 

«uses-permission android:name-"android.permission. RECORD AUDIO" /> 

«uses-permission android:name-"android.permission. MODIFY AUDIO SETTINGS" /> 

«uses-permission android:name-"android.permission. READ CONTACTS" /> 

«uses-permission android:name-"android.permission. WRITE CONTACTS" /> 
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«uses-permission android:name-"android.permission. WRITE EXTERNAL. STORAGE" /> 

«uses-permission android:name-"android.permission.ACCESS NETWORK STATE" /> 

«uses-permission android:name-"android.permission.BROADCAST STICKY" /> 
«uses-sdk android:minSdkVersion-"10" /> 


«application android:icon-"(Q)drawable/icon" android:label-"(string/lapp name" 
«activity android:name-" HelloWorldActivity" 
android:label-"(gstring/lapp name" 
«intent-filter 
«action android:name-"android.intent.action. MAIN" /> 
«category android:name-"android.intent.category.AUNCHER" /> 
</intent-filter> 
</activity> 
</application> 
</manifest> 


至 此 ， 整 个 实例 介绍 完毕 ， 此 时 在 Android 中 的 执行 效果 如 图 23-10 所 示 。 


E ow! â 7:27 


Hello World 


* undefined 
* 2.9.0 |5-2.9.0-0-g83dc4bd 
* Android 


e 233 
* d3a784162902f41d 


Footer 


mm 


图 23-10 最 终 的 执行 效果 


23.3 PhoneGap API 详解 


p» 知识 点 讲解 : 光盘 \ 视 频 讲 解 \ 第 23 章 \PhoneGap API 详解 .avi 
PhoneGap 为 开发 者 提供 了 丰富 的 API, 帮助 大 家 更 方便 地 获取 移动 设备 的 信息 。 PhoneGap 官方 网 
站 的 API 文档 地 址 是 http://docs.phonegap.com/en/1.5.0/index.html， 如 图 23-11 所 示 。 
在 目前 的 版 本 中 ，PhoneGap 拥有 如 下 所 示 的 可 用 API。 
Accelerometer: 加 速 计 ， 也 就 是 常 说 的 重力 感应 功能 。 
Camera: 用 于 访问 前 置 摄像 头 和 后 置 摄像 头 。 
Capture: 提供 了 对 于 移动 设备 音频 、 图 像 和 视频 捕获 功能 的 支持 。 
Compass: 对 于 罗盘 的 访问 ， 由 此 可 以 获取 移动 设备 行动 的 方向 。 
Connection: 能 够 快速 检查 并 提供 移动 设备 的 各 种 网 络 信息 。 


ARARA 


oid 移动 网 站 开发 详解 


E] Contacts: 能 够 获取 移动 设备 通讯 录 的 信息 。 

B Device: 能 够 获取 移动 设备 的 硬件 和 操作 系统 信息 。 

E] Events: 能 够 为 应 用 提供 各 种 移动 设备 操作 事件 ， 如 和 暂停、 离线 、 按 下 返回 键 、 按 下 音量 键 等 。 
回 File: 能 够 访问 移动 设备 的 本 地 文件 系统 。 

E] Geolocation: 能 够 获取 移动 设备 的 地 理 位 置信 息 。 

El] Media: 提供 了 对 于 移动 设备 上 音频 文件 的 录制 和 回放 功能 。 

El Notification: 提供 了 本 地 化 的 通知 机 制 ， 包 括 提 示 、 声 音 和 振动 。 

B] Storage: 提供 了 对 于 SQLite RA RSE EI] SCORE. 

本 节 将 详细 讲解 PhoneGap API 的 基本 知识 。 
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E] 23-11 PhoneGap 官方 网 站 的 API 
23.3.1 应 用 API 


在 PhoneGap 框架 中 , 为 Android 平台 提供 内 置 的 App 插件 来 操作 应 用 程序 本 身 , 利用 该 插件 对 象 
的 方法 可 以 实现 如 下 所 示 的 功能 。 


回 “加载 外 部 的 Web 页 面 到 本 程序 中 。 
回 ”在 加 载 页 面 完成 之 前 取消 页 面 的 加 载 。 
回 ”清空 应 用 程序 在 本 地 的 资源 文件 缓存 。 
回 ”清空 应 用 程序 的 浏览 页 面 历史 。 

回 ”返回 上 次 打开 的 页 面 。 

回 ” 蓝 盖 回 退 按钮 。 

ED ”退出 应 用 程序 。 


但 是 出 于 安全 的 考虑 ，PhoneGap 提供 了 一 个 白 名 单机 制 来 审核 加 载 的 内 容 来 源 ， 因 此 调用 应 用 
API 时 ， 首 先 需要 考虑 要 加 载 的 URI， 确 定 是 否 通过 了 白 名 单 审核 。 

在 PhoneGap 应 用 中 ，App 插件 通过 navigator.app 对 象 来 访问 ， 该 对 象 提供 了 如 下 所 示 的 方法 。 

E] navigatorapp.oadUrl: 加 载 Web 页 面 到 应 用 程序 中 或 者 系统 默认 的 浏览 器 中 。 
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navigatorapp.cancelLoadUrl: 在 Web 页 面 成 功 加 载 之 前 取消 加 载 。 
navigator.app.backHistory: 返回 上 一 次 浏览 的 页 面 。 
navigatorapp.clearHistory: 清除 浏览 历史 。 
navigator.App.overrideBackbutton: 覆盖 默认 的 回 退 功能 键 。 
navigator.app.clearCache: 清空 程序 的 资源 文件 缓存 。 
navigator.app.exitApp: 退出 应 用 程序 。 

下 面 将 详细 讲解 navigator.app 对 象 提供 的 方法 。 

(1) 加 载 URL。 

在 PhoneGap 应 用 中 ，navigator.app 提供 的 loadUrl0 方 法 用 于 在 应 用 程序 或 者 新 的 浏览 器 中 打开 一 
个 URL 链接 地 址 ， 同 时 可 以 设置 加 载 时 的 配置 参数 ， 如 等 待 加 载 的 时 间 、 加 载 过 程 中 是 否 显示 一 个 提 
示 窗 口 、 加 载 超时 的 时 间 设 置 等 。 该 方法 签名 如 下 。 


navigator.app.loadUrl(url,properties) 


其 中 ur 表示 链接 字符 串 ，properties 是 JSON 对 象 , 用 于 设 定 加 载 时 的 各 种 参数 。 相 关 配 置 参数 的 
具体 说 明 如 下 。 
E] wait Gnt XH): 表示 加 载 URL 之 前 的 等 待 时 间 。 
E] loadingDialog:"Title,Message": 表示 是 否 显示 本 地 的 加 载 提示 框 ， 提 示 框 的 标题 为 Tile， 提示 
框 的 内 容 为 Message。 
El loadUrlTimeoutValue (int 类 型 ): 表示 加 载 URL 的 超时 设置 。 
E] clearHistory: boolean 类 型 ， 表 示 是 否 清除 Web 视图 的 页 面 跳 转 历史 。 
E] openExternal: boolean 类 型 ,表示 是 否 在 一 个 新 的 浏览 器 中 打开 该 URL。 如 果 该 URL 不 在 白 
名 单 中 ， 即 使 设置 该 值 为 false， 应 用 还 是 在 系统 默认 的 浏览 器 中 打开 该 URL。 
例如 下 面 的 代码 表示 应 用 将 在 2 秒 钟 后 加 载 Adobe 主页 面 ， 加 载 过 程 中 显示 提示 等 待 信息 ， 超 时 
时 间 为 1 分 钟 。 
navigator.app.loadUri("http://www.adobe.com",{wait:2000,loadingDialog:"Wait, Loading App" loadUrlTimeoutValue: 
60000); 
(2) 取消 加 载 URL. 
在 PhoneGap 应 用 中 ，navigator.app 对 象 提供 的 cancelLoadUrl0 方 法 用 于 取消 正在 加 载 的 URL, 它 
没有 任何 参数 。 
(3) 应 用 回 退 。 
在 不 支持 Back 按钮 的 系统 中 ， 可 以 调用 backHistory0 方 法 实现 应 用 程序 的 回 退 。 该 方法 没有 任何 
参数 输入 。 
(4) 清除 浏览 历史 。 
在 PhoneGap 应 用 中 ， 使 用 navigator.app 对 象 提供 的 clearHistory0 方 法 ， 可 以 清除 浏览 历史 。 
(5) 覆盖 回 退 设置 。 
在 PhoneGap 应 用 中 ，navigator.app 对 象 提供 了 overrideBackbutton0 方 法 ， 功 能 是 设 定 是 否 覆 盖 当 
前 系统 默认 的 回 退 功能 。 在 实际 使 用 中 ， 通 常 通过 监听 backbutton 事件 来 改变 系统 的 默认 回 退 功能 。 
监听 该 事件 后 ，navigator.app 对 象 可 以 提供 isBackButtonOverriden0 方 法 检测 后 退 按钮 功能 是 否 已 经 发 


图 
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生 了 改变 。 

(6) 清空 缓存 。 

在 PhoneGap 应 用 中 ， 通 过 clearCache() 方 法 可 以 清空 缓存 的 资源 文件 ， 也 可 以 通过 clearHistoryO 
方法 清空 浏览 历史 ， 这 两 个 方法 均 没 有 参数 。 


CD 退出 程序 。 
在 PhoneGap 应 用 中 ， 通 过 调用 navigator.app.exitApp0 方 法 可 以 设置 何 时 退出 应 用 程序 。 
23.3.2 ”通知 API 


作为 一 个 良好 的 PhoneGap 应 用 程序 , 应 该 具有 良好 的 交互 性 , 能 够 在 恰当 的 时 刻 给 予 用 户 必 要 的 
通知 或 反馈 。 不 论 这 样 的 信息 是 关于 操作 出 错 , 还 是 寻求 确认 , 或 者 是 提示 操作 正在 进行 。 在 PhoneGap 
应 用 中 ， 提 供 了 统一 的 通知 API 来 解决 此 类 问题 。 

在 PhoneGap 应 用 中 ， 通 知 API 通过 navigator.notification 对 象 来 访问 ， 包 含 的 主要 方法 如 下 。 
notification.alert: 显示 自 定义 的 本 地 提示 对 话 框 。 

notification.confirm: 显示 自 定义 的 本 地 确认 对 话 框 。 

notification.beep: 发 出 嘟 嘟 声 。 

notification.vibrate: 振动 。 

notification.activityStart/activityStop: 控制 状态 栏 中 的 活动 指示 器 。 
notification.progressStart/progressValue/progressStop: 控制 进度 对 话 框 。 


实例 文件 23-2.html 的 具体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>index.html</title> 
«script type-"text/javascript" charset-"utf-8" src="cordova.js" ></script> 
«script type-"text/javascript" charset-"utf-8"7 


/和 等待 加 载 PhoneGap 
document.addEventListener("deviceready", onDeviceReady, false); 


IIPhoneGap 加 载 完毕 
function onDeviceReady(){ 
NÈ 


} 


// 显 示 定 制 警告 框 
function showAlert() { 


navigator.notification.alert( 
@ 


"You are the winner", // 显 示 信 息 
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'Game Over', Did 
'Done' /按钮 名 称 
y 
) 
</script> 
</head> 
<body> 
<p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p> 

</body> 
</html> 


执行 后 将 在 页 面 中 显示 一 个 Show Alert 链接 ， 单 击 后 将 弹出 一 个 警告 框 。 执 行 效果 如 图 23-12 所 示 。 


23.3.3 


Done 


You are the winner! 


23-12 ”执行 效果 
设备 API 


很 多 开发 平台 都 提供 运行 环境 软 硬 件 属性 的 API，PhoneGap 也 不 例外 。 本 节 将 从 主要 对 象 和 相关 
业务 操作 这 两 个 方面 来 介绍 设备 API 的 基本 知识 和 具体 用 法 。 


1. 主要 对 象 


在 PhoneGap 应 用 中 ， 设 备 API 通过 device 对 象 来 暴露 运行 环境 的 软 硬 件 属 性 ， 各 个 属性 的 具体 


说 明 如 下 。 


[ra] 
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device.name: 返回 的 是 设备 的 名 字 ， 该 名 字 是 一 个 比较 抽象 的 概念 。 该 值 是 由 设备 制造 商 设 
定 ， 可 能 同一 产品 的 不 同 版 本 之 间 有 所 不 同 。 

device.cordova: 返回 的 是 运行 在 该 设备 上 的 PhoneGap 的 版 本 ， 如 1.9.0。 

device.platform: 返回 的 是 设备 的 操作 系统 名 字 ， 根 据 设备 的 不 同 ， 返 回 的 值 可 能 是 Android. 
iPhone. BlackBerry. WebOS 或 WinCE. 

device.uuid: 返回 的 是 设备 的 通用 唯一 识别 码 CUniversally Unique Identifier)， 它 由 设备 制造 
商 设 定 。 不 同 的 设备 制造 商 有 不 同 的 生成 方法 ， 如 Android 上 是 64 位 随机 整数 的 十 六 进 制 表 
示 ， 而 iPhone 上 是 基于 多 个 硬件 标识 生成 的 散 列 值 。 

device.version: 返回 的 是 设备 的 操作 系统 的 版 本 ， 如 HTC Desire 返回 的 是 2.2。 
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2. 使 用 设备 API 


下 面 通过 一 个 检测 设备 属性 的 简单 例子 来 展示 device hs 


”实例 23-3: 展示 device 对 象 的 用 法 。 
源码 路 径 : 光盘 :\codes\23\23-3.html 


本 实例 的 实现 文件 是 23-3.html， 具 体 实 现代 码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 


«meta http-equiv-"Content-Type" content="text/html; charset=utf-8"> 


<title> 通 知 实例 </title> 


<script type="text/javascript" charset="utf-8" src="cordova.js"></script> 


«script type-"text/javascript" charset="utf-8"> 


document.addEventListener("deviceready",onDeviceReady, false); 


function onDeviceReady() ( 
var element-document.getElementByld('deviceProperties"); 
elementinnerHTML-'i$&4 E:  '+device.name+'<br/>'+ 
'"PhoneGap 版 本 : '-+device.cordova+'<br/>'+ 
设备 平台 :  '+ device.platform+'<br/>'+ 
设备 的 UUID: '+device.uuid+'<br/>'+ 
"设备 的 版 本 : '+ device.version +'<br />'; 
} 
«script» 
</head> 
<body> 
<p id="deviceProperties"></p> 
</bodY> 
</html> 


执行 后 将 在 屏幕 中 显示 当前 设备 的 信息 ,执行 效果 如 图 23-13 

在 PhoneGap 应 用 中 ， 基 于 上 述 属性 信息 ， 应 用 程序 可 以 做 
一 些 定制 化 的 操作 以 适应 不 同 设备 的 需求 ， 也 可 以 用 于 收集 用 户 
设备 分 布 之 类 的 统计 信息 。 


NaN 

设备 平台 : Android 

设备 的 UUID: Sareea 
设备 的 版 本 : 


图 23-13 执行 效果 


注意 : 因为 笔者 是 在 模拟 器 中 运行 上 述 实例 的 ， 所 以 执行 效果 如 图 23-13 所 示 ， 并 没有 显示 出 具体 的 “设备 


名 字 ” 和 “PhoneGap 版 本 ”。 
23.8.4 网 络 连接 API 


对 于 传统 的 Web 应 用 开发 来 说 ， 网 络 连接 正常 是 一 件 理所当然 的 事情 。 但 是 对 于 移动 应 用 来 说 ， 
用 户 很 可 能 处 于 信号 非常 差 的 地 方 ,或 者 为 了 节省 流量 ,经 常 暂时 关闭 了 网 络 连 接 。PhoneGap 为 此 专 


门 提供 了 网 络 连接 API 来 获取 此 类 信息 。 


在 PhoneGap 应 用 中 ， 网 络 连 接 API 通过 navigator.network.connection 对 象 来 访问 。 该 对 象 的 type 


484 


第 23 章 fél)PhoneGap ————0— 


属性 代表 了 网 络 连接 的 类 型 ， 其 所 有 的 可 能 取 值 通过 PhoneGap 中 的 Connection 来 获取 ， 分 别 是 
UNKNOWN, ETHERNET, WIFI, CELL 2G. CELL 3G. CELL 4G 和 NONE， 分 别 对 应 未 知 连接 、 


以 太 网 络 、Wi-Fi 网 络 、2G 网 络 、3G 网 络 、4G 网 络 以 及 无 网 络 连接 。 
下 面 通 过 一 个 检测 当前 网 络 状况 的 简单 例子 来 阐述 网 络 连接 APT 的 


区 实例 23-4: 阐述 网 络 连接 API 的 用 法 
源码 路 径 : 光盘 :\codes\23\23-4.html 


本 实例 的 实现 文件 是 23-4.html， 具 体 实现 代码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 
«meta http-equiv-"Content-Type" content-"text/html; charset=utf-8"> 
<title> 通 知 实例 </title> 


«script type-"text/javascript" charset-"utf-8" src="cordova.js"></script> 
«script type-"text/javascript" charset-"utf-8"» 


document.addEventListener("deviceready", onDeviceReady, false); 


function onDeviceReady() ( 
UB 监听 网 络 的 变化 
document.addEventListener("online", onOnline, false); 
document.addEventListener("offline", onOffline, false); 


l 检查 网 络 连 接 
checkNetworkConnection(); 

) 

function checkNetworkConnection() ( 
var states = (); 


states[Connection. UNKNOWN] = ' 未 知 连接 '; 
states[Connection.ETHERNET] = ' 以 太 网 ' 
states[Connection.WIFI] z'WiFi' 
states[Connection.CELL 2G] -'2G 网 络 '; 
states[Connection.CELL. 3G] -'3G 网 络 '; 
states[Connection.CELL 4G] -'4G 网 络 '; 
states[Connection.NONE] = ' 无 网 络 连接 '; 
alert(' 网 络 连 接 类 型 : ' + states[navigator.network.connection.type]); 


function onOnline() { 
alert(' 您 现在 在 线 '); 
) 


function onOffline() ( 
alert( 您 现在 离线 '); 


j 
«script» 
</head> 
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<body> 
<p> 检 查 网 络 类 型 的 例子 </p> 
«input type="button" value=" 检 查 网 络 " onClick-"checkNetworkConnection()" /> 
</body> 
</html> 
在 上 述 代码 中 ， 在 deviceready 的 事件 回调 函数 中 安全 地 添加 对 online 和 offline 事件 的 回调 函数 。 
当 网 络 环境 发 生变 化 时 , 相应 的 事件 回调 函数 便 会 被 正确 地 调用 。 还 有 一 点 值得 注意 的 是 , 在 PhoneGap 
L5 版 本 中 , online 和 offline 事件 需要 注册 在 Window 对 象 上 , 而 不 是 document 对 象 上 。 而 在 PhoneGap 
的 其 他 版 本 中 ，online 和 offline 事件 都 是 注册 在 document 对 象 上 的 。 
然后 在 文件 AndroidManifest xml 中 添加 网 络 访问 的 权限 ， 具 体 代 码 如 下 。 


<uses-permission android:name-"android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 


执行 文件 后 会 在 屏幕 中 显示 当前 设备 的 
网 络 类 型 ， 执 行 效果 如 图 23-14 所 示 。 


23.8.5 “加速 计 API 


在 现代 智能 手机 (如 iPhone FHL 应 用 
中 , 重力 感应 技术 是 吸引 用 户 眼球 的 一 个 重要 
功能 。 传 统 的 手机 界面 比较 死板 ,无 论 怎么 动 
或 是 摇晃 ， 其 界面 都 不 会 发 生变 动 ， 只 能 朝 一 
个 方向 定位 。 然而 运用 了 重力 感应 技术 的 现代 
智能 手机 改变 了 传统 手机 这 一 刻板 的 印象 , 手 
机 可 以 通过 内 置 方 向 感应 器 来 对 动作 作出 反 图 23-14 执行 效果 
应 。 当 将 手机 由 纵向 转 为 横向 时 , 方向 感应 器 
会 自动 作出 反应 并 改变 显示 方式 。 例 如 ， 市 面 上 大 部 分 手机 都 是 矩形 手机 ， 长 和 宽 的 尺寸 不 一 样 ， 当 
在 用 手机 浏览 网 页 或 看 电子 书 时 ， 界 面 所 呈现 的 也 多 是 矩形 画面 ， 长 与 宽 的 比例 也 是 不 一 样 的 。 以 一 
段 文章 来 看 ， 由 于 文字 是 由 左 向 右 排列 的 ， 所 以 横向 的 文字 会 比 纵向 的 文字 多 ， 而 传统 手机 一 般 都 是 
横向 比 纵向 短 ， 因 此 浏览 起 来 很 不 方便 。 有 了 重力 感应 器 之 后 ， 这 个 问题 就 解决 了 ， 因 为 它 可 以 让 手 
机 随 着 手 的 转动 而 变化 。 这 种 应 用 上 的 创新 设计 ， 让 浏览 用 户 有 了 全 新 的 体验 。 本 节 将 详细 讲解 在 
PhoneGap 应 用 中 使 用 加 速 计 API 的 基本 知识 。 


1. 主要 对 象 


在 PhoneGap 应 用 中 ，acceleration 对 象 就 是 加 速度 对 象 , 包括 在 特定 时 间 点 的 加 速度 数据 ， 具 有 如 
下 属性 。 

ED ox: 表示 x 轴 上 的 动量 ，number 类 型 ， 其 范围 为 0 一 1。 

回 y: 表示 y 轴 上 的 动量 ，number 类 型 ， 其 范围 为 0 一 1。 

ED oz 表示 z 轴 上 的 动量 ，number 类 型 ， 其 范围 为 0 一 1。 

El timestamp: 创建 的 时 间 戳 ，DOMTimeStamp 类 型 ， 以 毫秒 数 表示 。 
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acceleration 对 象 由 PhoneGap 创建 并 计算 ， 一 般 由 调用 的 加 速 计 方法 的 回调 函数 来 返回 。 在 
PhoneGap 应 用 中 ， 加 速 计 API 主要 包含 如 下 所 示 的 选项 参数 。 

M accelerometerSuccess: 成 功 获取 加 速度 信息 后 的 回调 函数 , 返回 的 属性 值 包含 各 维度 加 速度 信 

息 的 acceleration 对 象 。 

accelerometerError: 获取 加 速度 信息 失败 后 的 回调 函数 。 

El accelerometerOptions: 获取 加 速度 信息 时 的 选项 ， 如 获取 频率 。 

在 PhoneGap 应 用 中 ，accelerometerOptions 一 般 是 一 个 JSON 对 象 ，frequency 是 其 目前 唯一 的 属 
性 参数 ， 以 毫秒 数 为 表示 单位 ， 用 来 指定 定期 获取 加 速度 信息 的 频率 。 如 果 不 指定 frequency, WERA 
值 为 10 秒 ， 即 10000 毫秒 。 

在 PhoneGap 应 用 中 ，accelerometerOptions 的 常见 用 法 如 下 。 

/下 面 的 代码 设置 每 隔 3 秒 更 新 一 次 

var options-(frequency:3000); 

watchID-navigator.accelerometer.watchAcceleration(onSuccess,onError,options); 

在 PhoneGap 应 用 中 ， 加 速 计 API 包含 如 下 所 示 的 方法 ， 这 些 方法 通过 navigator 对 象 进行 访问 。 

回 accelerometer.getCurrentAcceleration():: 获取 当前 设备 分 别 在 x、y 和 z 轴 上 的 加 速度 。 

回 accelerometerwatchAcceleration0: 定期 获取 设备 的 加 速度 信息 。 

E] accelerometerclearWatch(): 停止 定期 获取 设备 的 加 速度 信息 。 


. clearWatch() 


在 PhoneGap 应 用 中 ,accelerometer.clearWatchO 的 功能 是 取消 定期 获取 设备 的 加 速度 信息 ,其 原型 
如 下 。 


navigator. accelerometer.clearWatch(watchID); 


N 


其 中 watchID 是 刚刚 调用 accelerometer.watchAcceleration0 所 返回 的 ID 值 ， 即 由 accelerometer. 
watchAcceleration 返回 的 引用 标识 ID 。 
例如 下 面 是 应 用 clearWatchO 的 演示 代码 。 


var watchlD = navigator.accelerometer.watchAcceleration(onSuccess, onError, options); 
II... FERT... 
navigator.accelerometer.clearWatch(watchlD); 


下 面 通过 一 个 简单 例子 来 阐述 使 用 clearWatchO 清 除 加 速度 信息 的 方法 。 
区 E 实例 23-5: 使 用 clearWatch0 清 除 加 速度 信息 
源码 路 径 : 光盘 :\codes\23\23-5.html 


本 实例 的 实现 文件 是 23-5.html， 具 体 实 现代 码 如 下 。 


«IDOCTYPE html» 
«html» 
<head> 
«meta http-equiv="Content-Type" content-"text/html; charset=utf-8"> 
<title>Acceleration 例子 </title> 


/( Android 移动 网 站 开发 详解 


«script type-"text/javascript" charset-"utf-8" src="cordova.js"></script> 
«script type-"text/javascript" charset-"utf-8"^ 


/当前 watchAcceleration 的 引用 ID 
varwatchID:null; 
/和 等待 PhoneGap 加 载 
document.addEventListener( "deviceready",onDeviceReady false); 
/加 载 完成 
function onDeviceReady() { 
startWatch(); 


) 

/开始 监测 

function startWatch() { 

IRR 3 秒 更 新 一 次 信息 

var options-(frequency:3000 }; 
watchlD-navigator.accelerometer.watchAcceleration(onSuccess, 
onError,options); 


) 
/停止 检测 
function stopWatch(){ 
if(watchID) { 
navigator. accelerometer. clearWatch( watchlD); 
watchlIDznull; 


) 


} 
// 成 功 获取 加 速度 信息 后 的 回调 函数 
// 接 收 包含 当前 加 速度 信息 的 acceleration 对 象 
function onSuccess(acceleration) { 
var element-document.getElementByld('accelerometer'); 
elementinnerHTML-"'x 轴 方 向 的 加 速度 : "+acceleration .x+'<br/>'+ 
YY 轴 方 向 的 加 速度 : '+ acceleration.y+'<br/>'+ 
ZAAR: '+ acceleration .z+'<br/>'+ 
' 时 间 礁 :+ acceleration.timestamp-*"«br/»"; 


} 


// 获 取 加 速度 信息 失败 后 的 回调 函数 

function onError() { 

alert('onError!"); 

H 

</script> 

</head> 

<body> 

<div id=n accelerometer"> 监 测 加 速度 信息 中 …</div> 

«button onclick="stopWatch():"> 停 止 监测 加 速度 信息 </button> 


</body> 
</html> 
执行 后 的 效果 如 图 23-15 所 示 ， 这 是 因为 在 模拟 器 中 运行 的 原因 ， 如 果 在 真 机 中 运行 会 显示 预期 
的 效果 。 
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监测 加 速度 信息 中 … 


图 23-15 执行 效果 
23.3.6 ”地 理 位 置 API 


在 PhoneGap 框架 中 ， 使 用 Geolocation 接口 可 以 通过 网 页 获取 地 理 位 置信 息 。 一 般 来 说 ， 地 理 位 
置信 息 来 源 于 GPS 传感器 。 对 于 没有 GPS 功能 的 手机 来 说 , 也 可 以 通过 一 些 网 络 设备 信号 大 致 推断 自 
己 所 处 的 地 理 位 置 ， 如 IP 地 址 、RFID、 无 线 网 络 、 蓝 牙 MAC 地 址 、GSM/CDMA 蜂窝 基站 信息 。 


1. 3 个 对 象 


在 PhoneGap 应 用 中 ， 地 理 位 置 API 主要 包括 3 个 对 象 Position 对 象 、PositionError 对 象 和 
Coordinates 对 象 。 
(1) Position 对 象 
Position 对 象 包含 由 Geolocation API 创建 的 Position 坐标 信息 。PhoneGap 的 地 理 位 置 接口 调用 成 
功 后 的 回调 函数 用 到 Position 对 象 , 它 包 含 了 地 理 位 置 坐标 的 集合 。Position 对 象 具 有 如 下 所 示 的 属性 。 
E] coords: 地 理 位 置 坐标 集合 ， 为 Coordinates 类 型 。 
E] timestamp: 地 理 位 置 坐标 获取 时 的 时 间 戳 ， 为 DOMTimeStamp 类 型 ， 以 毫秒 数 表示 。 
(2) PositionError 对 象 
在 PhoneGap 应 用 中 ， 当 发 生 错误 时 ， 一 个 PositionError 对 象 会 传递 给 geolocationError 回调 函数 。 
PhoneGap 的 地 理 位 置 接口 调用 失败 后 的 回调 函数 用 到 PositionError 对 象 ， 它 包含 了 详细 的 错误 信息 。 
PositionError 对 象 具 有 如 下 所 示 的 属性 。 
E] code: 预定 义 的 错误 代码 , 目前 有 PositionErrorPERMISSION_DENIED、PositionErorPOSITION _ 
UNAVAILABLE 和 PositionError. TIMEOUT. 
El message: 详细 的 错误 信息 。 
当 使 用 Geolocation 发 生 错误 时 , 一 个 PositionError 对 象 会 作为 geolocationError 回调 函数 的 参数 传 
38751" . PositionError 对 象 具 有 如 下 所 示 的 常量 。 
E] PositionError.PERMISSIONPositionError PERMISSION DENIED: 表示 权限 被 拒绝 。 
E] PositionEror.POSITION UNAVAILABLE: 表示 位 置 不 可 用 。 
El PositionError. TIMEOUT: 表示 超时 。 
(3) Coordinates 对 象 
在 PhoneGap NH rf, Coordinates 对 象 是 描述 设备 地 理 位 置 坐标 信息 的 属性 集合 , 是 一 系列 用 来 描 
述 位 置 的 地 理 坐 标 信息 的 属性 。Coordinates 对 象 一 般 是 一 个 JSON 对 象 ， 具 有 如 下 所 示 的 属性 。 
latitude: 设备 所 处 的 纬度 值 ，Number 类 型 ， 以 浮 点 数 表 示 。 
longitude: 设备 所 处 的 经 度 值 ，Number 类 型 ， 以 浮 点 数 表 示 。 
altitude: 设备 所 处 的 海拔 高 度 ，Number 类 型 ， 以 浮 点 数 表示 。 
accuracy: 经 纬度 的 精确 度 级 别 ，Number 类 型 ， 以 浮 点 数 表示 。 
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E] altitudeAccuracy: 海拔 高 度 的 精确 度 级 别 ，Number 类 型 ， 以 浮 点 数 表 示 。 

E] heading: 设备 当前 的 运动 方向 ， 相 对 于 正 北方 顺 时 针 方向 的 角度 ，Number 类 型 ， 以 浮 点 数 表 示 。 
El speed: 设备 当前 的 速度 值 ，Number 类 型 ， 以 浮 点 数 表示 。 

2. 使 用 地 理 位 置 API 


下 面 通过 一 个 简单 的 例子 来 阐述 使 用 Position 对 象 的 方法 。 


iC 实例 23-6: 使 用 Position 对 象 
源码 路 径 : 光盘 :\codes\23\23-6.html 


本 实例 的 实现 文件 是 23-6.html， 具 体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>index.html</title> 
«script type-"text/javascript" charset-"utf-8" src-"cordova.js" ></script> 
«script type-"text/javascript" charset-"utf-8"» 


I ii —^* 34 PhoneGap 加 载 完毕 后 触发 的 事件 
document.addEventListener("deviceready", onDeviceReady, false); 


I|PhoneGap 加 载 完毕 并 就 绪 
function onDeviceReady(){ 
navigator.geolocation.getCurrentPosition(onSuccess, onError); 
) 
// 显 示 位 置信 息 中 的 Position 属性 
function onSuccess(position) { 
var div = document.getElementByld('myDiv"); 
div.innerHTML = 'Latitude: ' + position.coords.latitude + '«br/»' + 
"Longitude: ' + position.coords.longitude + '<br/>' + 
"Altitude: ' + position.coords.altitude + '<br/>' + 
"Accuracy: ' + position.coords.accuracy + '<br/>' + 
"Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br/>' + 
"Heading: ' + position.coords.heading + '<br/>' + 
'Speed: ' + position.coords.speed +'<br/>'; 
) 
/如 果 获取 位 置信 息 出 现 问题 ， 则 显示 一 个 警告 
function onError(){ 
alert('onError!); 
) 
</script> 
</head> 
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<body> 
<div id="myDiv"></div> 

</body> 

</html> 


执行 后 的 效果 如 图 23-16 所 示 ， 这 是 因为 在 模拟 器 中 运行 的 原因 ， 
如 果 在 真 机 中 运行 会 显示 我 们 预期 的 效果 。 


Alert 


onError! 


23.3.7 ”指南 针 API mcs 


在 PhoneGap 框架 中 ， 使 用 Compass 接口 可 以 实现 指南 针 功 能 。 图 23-16 执行 效果 
拥有 电子 罗盘 传感器 的 移动 设备 一 般 都 有 指南 针 功 能 ， 电 子 罗盘 和 传 
统 罗盘 的 作用 一 样 ， 用 来 指示 方向 。 电 子 罗盘 相关 的 应 用 很 多 ， 例 如 根据 电子 罗盘 的 读数 ， 地 图 可 以 
自动 旋转 到 方便 用 户 读 取 的 方向 ， 十 分 适合 不 太 会 用 地 图 的 人 使 用 ; 可 以 根据 地 标 粗略 估计 自己 所 处 
位 置 、 控 制 行进 方向 等 。 此 外 ， 电 子 罗盘 可 方便 地 与 GPS 和 电子 地 图 等 系统 整合 使 用 。 熟 练 运用 GPS 
导航 功能 和 电子 罗盘 功能 ， 能 让 我 们 在 任何 地 方 都 不 会 迷路 。 

1. 3 个 函数 

在 PhoneGap 应 用 中 , 指南 针 API 有 3 个 函数 :compass.getCurrentHeadingO、compass.watchHeadingO 
和 compass.clearWatch()。 下 面 将 详细 讲解 这 3 个 函数 的 基本 知识 和 具体 用 法 。 


(1) compass.getCurrentHeading() 
在 PhoneGap 应 用 中 ，compass.getCurrentHeading0 函 数 的 功能 是 获取 罗盘 的 当前 朝向 。 其 原型 如 下 。 


navigator.compass.getCurrentHeading(compassSuccess, compassError, compassOptions); 


其 中 compassSuccess 是 成 功 获取 指南 针 信息 后 的 回调 函数 ，compassError 是 获取 指南 针 信息 失 败 
后 的 回调 函数 ;compassOptions 为 可 选项 ， 用 来 指定 获取 指南 针 信 息 的 个 性 化 参数 。 
(2) compass.watchHeading() 
在 PhoneGap 应 用 中 ，compass.watchHeadingO 函 数 的 功能 是 在 固定 的 时 间 间 隔 获取 罗盘 朝向 的 角 
度 。 其 原型 如 下 。 


var watchlD = navigator.compass.watchHeading(compassSuccess, compassError, [compassOptions]); 


罗盘 是 一 个 检测 设备 方向 或 朝向 的 传感器 , 使 用 度 作为 衡量 单位 , 取 值 范围 为 0 一 359.99。compass. 
watchHeading 每 隔 固 定时 间 就 获取 一 次 设备 的 当前 朝向 。 每 次 取得 朝向 后 ，headingSuccess 回调 函数 会 
被 执行 ,通过 compassOptions 对 象 的 frequency 参数 可 以 设 定 以 毫秒 为 单位 的 时 间 间 隔 。 返 回 的 watch ID 
是 罗盘 监视 周期 的 引用 ， 可 以 通过 compass.clearWatchO 调 用 该 watch ID 以 停止 对 罗盘 的 监视 。 
(3) compass.clearWatch() 
在 PhoneGap 应 用 中 , compass.clearWatch0 函 数 的 功能 是 停止 watch ID 参数 指向 的 罗盘 监视 , 取消 
定期 获取 设备 的 指南 针 信 息 。 其 原型 如 下 。 


navigator.compass.clearWatch(watchID); 


其 中 watchID 由 compass.watchHeading0 返 回 的 引用 标示 。 
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2. 使 用 指南 针 API 
下 面 通过 一 个 简单 的 例子 来 阐述 使 用 clearWatchO 函 数 的 方法 。 


E dE erra BEEN 


源码 路 径 : 光盘 :\codes\23\23-7.html 


本 实例 的 实现 文件 是 23-7.html， 具 体 实现 代码 如 下 。 


<IDOCTYPE html» 
<html> 
<head> 
<title>Compass 例子 </title> 
«meta http-equiv-"Content-Type" content="text/html; charset=utf-8"> 
«script type="text/javascript" charset-"utf-8" src="cordova.js"></script> 
«script type="text/javascript" charset="utf-8"> 


// 当 前 watchHeading 的 引用 
var watchID = null; 


/| 等 待 Cordova 加 载 
document.addEventListener("deviceready", onDeviceReady, false); 


/Cordova 加 载 完 成 

function onDeviceReady() ( 
startWatch(); 

) 


/开始 对 指南 针 设 备 的 监控 
function startWatch() ( 


// 每 隔 3 秒 更 新 一 次 数据 
var options = { frequency: 3000 }; 


watchID = navigator.compass.watchHeading(onSuccess, onError, options); 


/停止 对 指南 针 设备 的 监控 
function stopWatch(){ 
if (watchlD) ( 
navigator.compass.clearWatch(watchlD); 
watchlD = null; 


) 


/onSuccess() 回 调 函 数 : 返回 指南 针 的 当前 方向 
function onSuccess(heading){ 

var element = document.getElementByld('heading'); 

elementinnerHTML = ' 指 南 针 方向 (角度 ) : + heading.magneticHeading; 
) 


/lonError() 回 调 函 数 : 返回 详细 的 错误 信息 
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function onError(compassError) { 
alert( 错误 信息 :" + compassError.code); 
} 


</script> 
</head> 
<body> 
«div id="heading"> 监 测 指南 针 信息 中 ...</div> 
«button onclick="startWatch();"> 开 始 监 测 指南 针 信息 </button> 
«button onclick="stopWatch():"> 停 止 监测 指南 针 信息 </button> 
</body> 
</html> 
执行 后 的 效果 如 图 23-17 所 示 , 这 是 因为 在 
模拟 器 中 运行 的 原因 ， 如 果 在 真 机 中 运行 会 显 
示 我 们 预期 的 效果 。 


23.3.8 照相 机 API 


在 PhoneGap 应 用 中 , 照相 机 API 是 Camera， 
其 功能 是 使 用 设备 的 摄像 头 采集 照片 ， 对 象 提 
供 对 设备 默认 摄像 头 应 用 程序 的 访问 。 通 过 使 
用 照相 机 API, 可 以 拍照 或 者 访问 照片 库 中 的 照 
片 。 本 节 将 首先 讲解 照相 机 API 用 到 的 对 象 ， 


然后 详细 介绍 如 何 利用 照相 机 API 进行 拍照 并 图 23-17 执行 效果 
访问 照片 库 中 的 照片 。 

1. camera.getPicture() 方 法 

在 PhoneGap 应 用 中 ， 照 相机 API 只 有 一 个 方法 : camera.getPicture0， 其 功能 是 选择 使 用 摄像 头 拍 


照 ， 或 从 设备 相册 中 获取 一 张 照片 ， 图 片 以 Base64 编码 的 字符 串 或 图 片 URI 形式 返回 。 方 法 
camera.getPicture 的 原型 如 下 。 


navigator.camera.getPicture(cameraSuccess, cameraError, [ cameraOptions ] ); 


由 此 可 见 ， 方 法 camera.getPicture 有 3 个 参数 ， 具 体 说 明 如 下 。 
(1) cameraSuccess: 是 成 功 访问 图 片 后 的 回调 函数 ， 该 函数 的 参数 取 值 取决 于 destinationType 的 
类 型 , 如 果 destinationType 是 DATA_URL, 则 该 参数 返回 Base64 编码 的 图 像 数据 ; 如 果 destinationType 
是 FIFE_URI， 则 该 参数 返回 的 是 图 像 的 URI。 不 论 是 图 像 数据 或 者 URI， 都 可 以 通过 img 标签 的 src 
属性 显示 在 网 页 中 ， 如 对 于 图 片 数据 imageData， 通 过 给 src 属性 赋值 "data:image/jpeg:base64,"+ 
imageData 即 可 。 而 对 于 图 片 URI imageURI， 通 过 给 src 属性 直接 赋值 imageURI 即 可 。 
(2) cameraError: 是 访问 图 片 失败 后 的 回调 函数 ， 该 函数 的 参数 为 失败 的 消息 。 
(3) cameraOptions: 提供 配置 参数 ， 是 键 值 对 的 JSON 字符 串 ， 共 有 8 个 配置 参数 ， 有 具体 说 明 如 下 。 
E] sourceType: 如 果 该 参数 是 navigator.camera.PictureSourceType.PHOTOLIBRARY， 则 从 图 片 库 
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获取 图 片 ， 如 果 该 参数 是 navigator.camera.PictureSourceType.SAVEDPHOTOALBUM， 则 从 相 
册 中 获取 图 片 ， 如 果 该 参数 是 navigator.camera.PictureSourceType.CAMERA， 则 从 设备 的 照相 
机 中 获取 图 片 。 在 某 些 设备 中 ，PHOTOLIBRARY 和 SAVEDPHOTOALBUM 相同 。 
destinationType: 该 参数 可 以 决定 返回 的 数据 类 型 ， 可 以 是 图 片 的 URL， 也 可 以 是 图 片 数 据 。 
quality: 该 参数 用 于 设 定 图 片 的 质量 ， 可 以 是 1 一 100 之 间 的 任意 数字 。 
allowEdit: 该 参数 为 布尔 型 ， 指 定 该 图 片 在 选中 前 是 否 可 以 编辑 。 
encodingType: 该 参数 的 值 是 常量 ， 可 以 是 camera.encodingType.JPEG 或 者 camera.encodingType. 
PNG， 用 于 指定 图 片 返回 的 文件 类 型 。 
targetWidth: 用 于 指定 图 片 展示 时 的 宽度 ， 以 像素 为 单位 ， 必 须 和 targetHeight 一 起 使 用 。 
targetHeight: 用 于 指定 图 片 展 示 时 的 高 度 ， 以 像素 为 单位 ， 必 须 和 targetWidth 一 起 使 用 。 
mediaType: 该 参数 对 应 的 值 为 常量 ， 可 以 为 camera.mediaType.PICTURE camera.mediaType. 
VIDEO 或 者 camera.mediaType.ALLMEDIA。 该 参数 只 有 在 sourceType 设 定 为 PHOTOLIBRARY 
或 者 SAVEDPHOTOALBUM 的 情况 下 才 可 使 用 。 
由 此 可 见 , 方法 camera.getPicture0 能 够 打开 设备 的 默认 摄像 头 应 用 程序 , 使 用 户 可 以 拍照 (Camera. 
sourceType 设置 为 Camera.PictureSourceType.CAMERA， 这 也 是 默认 值 )。 一 旦 拍照 结束 ,摄像头 应 用 
程序 会 关闭 并 恢复 用 户 应 用 程序 。 
如 果 Camera.sourceType — Camera.PictureSourceType.PHOTOLIBRARY 或 Camera.PictureSourceType. 
SAVEDPHOTOALBUM， 则 系统 弹出 照片 选择 对 话 框 ， 用 户 可 以 从 相 集 中 选择 照片 。 
返回 值 会 按照 用 户 通过 cameraOptions 参数 所 设 定 的 下 列 格 式 之 一 发 送 给 cameraSuccess 回调 函数 。 
ED ”一 个 字符 串 ， 包 含 Base64 编码 的 照片 图 像 (默认 情况 )。 
回 “ 一 个 字符 串 ， 表 示 在 本 地 存储 的 图 像 文 件 位 置 。 
E) ”可 以 对 编码 的 图 片 或 URI 做 任何 处 理 ， 例 如 
> ”通过 标签 泻 染 图 片 。 
> 存储 为 本 地 数据 ， 如 LocalStorage、Lawnchair* 等 。 
> ”将 数据 发 送 到 远程 服务 器 。 
注意 : 在 现实 应 用 中 ， 较 新 的 设备 上 使 用 摄像 头 拍摄 的 照片 的 质量 是 相当 不 错 的 ， 使 用 Base64 对 这 些 
照片 进行 编码 已 导致 其 中 的 一 些 设备 出 现 内 存 问 题 (如 iPhone4、BlackBerry Torch 9800) 。 因 此 ， 
强烈 建议 将 Camera.destinationType 设 为 FILE_URI。 


2. 实战 演练 
下 面 通过 一 个 简单 的 例子 来 阐述 使 用 照相 机 API 的 方法 。 


K "AN 实例 23-8: 阐述 使 用 照相 机 API 的 方法 
— 源码 路 径 : 光盘 :\codes\23\23-8.html 


AARAA 


ARARA 


本 实例 的 实现 文件 是 23-8.html， 具 体 实现 代码 如 下 。 


«IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
«meta name-'"viewport" content-"width-device-width, initial-scale=1"> 


e. 
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<title>index.html</title> 
«script type-"text/javascript" charset-"utf-8" src="cordova.js" ></script> 
«script type-"text/javascript" charset-"utf-8"» 


var pictureSource; /图 片 来 源 
var destinationType; /设置 返回 值 的 格式 
/等 待 PhoneGap 连接 设备 


document.addEventListener("deviceready",onDeviceReady false); 


/PhoneGap 准备 就 绪 ， 可 以 使 用 

function onDeviceReady() { 
pictureSource-navigator.camera.PictureSourceType; 
destinationType-navigator.camera.DestinationType; 

) 


// 当 成 功 获得 一 张 照片 的 Base64 编码 数据 后 被 调用 
function onPhotoDataSuccess(imageData) ( 


// 取 消 注释 以 查看 Base64 编码 的 图 像 数 据 
liconsole.log(imageData); 

/获取 图 像 句 柄 

var smalllmage = document.getElementByld('smallimage"); 


/取消 隐藏 的 图 像 元 素 
smalllmage.style.display = 'block'; 


/显示 拍摄 的 照片 

/使 用 内 骨 CSS 规则 来 缩放 图 片 

smalllmage.src = "data:image/jpeg;base64," + imageData; 
) 


// 当 成 功 得 到 一 张 照片 的 URI 后 被 调用 
function onPhotoURISuccess(imageURI) ( 


// 取 消 注释 以 查看 图 片 文件 的 URI 
IIconsole.log(imageURI); 

/获取 图 片 句柄 

var largelmage = document.getElementByld('largelmage"); 


/取消 隐藏 的 图 像 元 素 
largelmage.style.display  'block'; 
/显示 拍摄 的 照片 
IH FH PER CSS 规则 来 缩放 图 片 
largelmage.src = imageURI; 
) 
/Capture Photo 按钮 单 击 事件 触发 函数 
function capturePhoto() ( 


IN 
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// 使 用 设备 上 的 摄像 头 拍照 ， 并 获得 Base64 编码 字符 串 格式 的 图 像 
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); 
} 


/Capture Editable Photo 按钮 单 击 事件 触发 函数 
function capturePhotoEdit() ( 


/使 用 设备 上 的 摄像 头 拍照 ， 并 获得 Base64 编码 字符 串 格式 的 可 编辑 图 像 
navigator.camera.getPicture(onPhotoDataSuccess, onFail, ( quality: 20, allowEdit true }); 
f 


/IFrom Photo Library/From Photo Album 按钮 单 击 事件 触发 函数 
function getPhoto(source) ( 


// 从 设 定 的 来 源 处 获取 图 像 文件 URI 
navigator.camera.getPicture(onPhotoURISuccess, onFail, ( quality: 50, 
destinationType: destinationType.FILE URI,sourceType: source }); 

) 


// 当 有 错误 发 生 时 触发 此 函数 
function onFail(mesage) ( 
alert('Failed because: ' + message); 


) 


</script> 
</head> 
<body> 
«button onclick="capturePhoto();">Capture Photo</button> «br» 
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> «br» 
«button onclick="getPhoto(pictureSource.PHOTOLIBRARY):">From Photo Library</button><br> 
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br> 
«img style="display:none;width:60px;height:60px;" id-"smalllmage" src" /> 
«img style-"display:none;" id-"largelmage" src=" /> 
</body> 
</html> 


执行 后 的 效果 如 图 23-18 所 示 ， 单 击 屏幕 中 的 某 个 按钮 后 ， 


会 实现 对 应 的 功能 。 例 如 如 果 在 真 机 中 运行 ， 单 击 From Photo 
Album 按钮 后 ， 会 显示 系统 图 片 库 内 的 图 片 信息 。 


Capture Photo. 


Capture Editable Photo. 


23.3.9 采集 API From Photo Library 
From Photo Album; 
TE PhoneGap 应 用 中 , Capture 也 被 称 为 采集 API 或 捕获 APL， 图 23-18 执行 效果 


其 功能 是 捕获 视频 、 音 频 和 图 像 ， 是 一 个 全 局 对 象 。 本 节 将 首 
先 讲解 采集 API 用 到 的 对 象 ， 然 后 详细 介绍 采集 API 的 具体 用 法 。 


1. Capture 的 对 象 
在 PhoneGap 应 用 中 ， 采 集 API 有 如 下 所 示 的 对 象 。 
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C1) capture: 被 分 配给 navigator.device 对 象 ， 因 此 作用 域 为 全 局 范围 。 例 如 下 面 的 演示 代码 。 


// 全 局 范围 的 capture 对 象 

var capture = navigator.device.capture; 

capture 对 象 包 含 如 下 所 示 的 属性 。 

E] supportedAudioModes: 当前 设备 所 支持 的 音频 录制 格式 ， 是 ConfigurationData[] 类 型 。 

回 ”supportedImageModes: 当前 设备 所 支持 的 拍摄 图 像 尺 寸 及 格式 ， 是 ConfigurationData[] 类 型 。 

E] supportedVideoModes: 当前 设备 所 支持 的 拍摄 视频 分 辨 率 及 格式 , 是 ConfigurationData[] 类 型 。 
(2) CaptureAudioOptions: 用 于 封装 音频 采集 的 配置 选项 ， 包 含 如 下 所 示 的 属性 。 

B dimit: 在 单个 采集 操作 期 间 能 够 记录 的 音频 剪辑 数量 最 大 值 ， 必 须 设 定 为 大 于 等 于 1 的 值 ， 

默认 值 为 1。 
回 drration: 一 个 音频 剪辑 的 最 长 时 间 ， 单 位 为 秒 。 
回 mode: 选 定 的 音频 模式 ， 必 须 设 定 为 capture.supportedAudioModes 枚 举 中 的 值 。 


2. 使 用 Capture 
下 面 通过 一 个 简单 的 例子 来 曾 述 使 用 captureAudio 的 方法 。 


实例 23-9: 阐述 使 用 captureAudio 的 方法 
源码 路 径 : 光盘 :\codes\23\23-9.html 


本 实例 的 实现 文件 是 23-9.html， 具 体 实现 代码 如 下 。 


«IDOCTYPE html» 
«html» 
*head» 
<meta charset-"utf-8"» 
«meta name-"viewport" content-"widthzdevice-width, initial-scale21"» 
«title"index.html«/title» 
«script type-"text/javascript" charset-"utf-8" src-"cordova.js" ></script> 
«script type-"text/javascript" charset-"utf-8" src-"json2 js"» «/script» 
«script type-"text/javascript" charset="utf-8"> 


/采集 操作 成 功 完成 后 的 回调 函数 
function captureSuccess(mediaFiles){ 
var i, len; 
for (i = 0, len = mediaFiles.length; i < len; i += 1) ( 
uploadFile(mediaFiles[i]); 


H 


/采集 操作 出 错 后 的 回调 函数 

function captureError(error) { 
var msg = 'An error occurred during capture: ' + error.code; 
navigator.notification.alert(msg, null, 'Uh oh"); 

Ji 


lICapture Audio 按钮 单 击 事件 触发 函数 
function captureAudio() { 
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// 启 动 设备 的 音频 录制 应 用 程序 ， 允 许 用 户 最 多 采集 两 个 音频 剪辑 
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 2}); 
} 


// 上 传 文件 到 服务 器 
function uploadFile(mediaFile) { 
var ft = new FileTransfer(), 
path = mediaFile.fullPath, 
name - mediaFile.name; 
ft.upload(path, 
"http://my.domain.com/upload.php", 
function(result) ( 
console.log('Upload success: ' * result.responseCode); 
console.log(result.bytesSent + ' bytes sent"); 
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function(error) ( 
console.log('Error uploading file ' + path + ': ' + error.code); 
E 
( fileName: name }); 
) 
</script> 
</head> 
<body> 
«button onclick="captureAudio();">Capture Audio</button> 
</body> 
</html> 


执行 后 的 效果 如 图 23-19 所 示 。 
如 果 在 真 机 中 运行 ， 单 击 Capture 
Audio 按钮 后 会 实现 我 们 预期 的 采 
集 功能 。 


23.3.10 ”媒体 API 


Capture Audio 


在 PhoneGap 应 用 中 , 媒体 API 
是 Media, 其 功能 是 实现 音频 的 录制 a 
和 播放 。 利用 Media, 可 以 创建 自制 ENS AIEE 
的 录音 器 。 本 节 将 首先 讲解 媒体 API 的 方法 ， 然 后 详细 介绍 如 何 利用 媒体 API。 
1. 主要 方法 
在 PhoneGap 应 用 中 ，Media 主要 包含 如 下 所 示 的 方法 。 
(1) media.getCurrentPosition0: 功能 是 返回 一 个 音频 文件 的 当前 位 置 ， 其 原型 如 下 。 


media.getCurrentPosition(mediaSuccess, [mediaError]); 


参数 说 明 如 下 。 
M mediaSuccess: 成 功 的 回调 函数 ， 返 回 当前 的 位 置 。 
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M mediaEmor: 〈 可 选项 ) 发 生 错 误 时 调用 的 回调 函数 。 

方法 media.getCurrentPosition0) 是 一 个 异步 函数 ， 返 回 一 个 Media 对 象 所 指向 的 音频 文件 的 当前 位 
置 ， 同 时 会 对 Media 对 象 的 _position 参数 进行 更 新 。 

(2) media.getDuration(): 功能 是 返回 音频 文件 的 时 间 长 度 ， 其 原型 如 下 。 

media.getDuration(); 

media.getDuration0 是 一 个 同步 函数 ， 如 果 音 频 时 长 已 知 ， 则 返回 以 秒 为 单位 的 音频 文件 时 长 ， 如 
果 时 长 不 可 知 ， 则 返回 -1 。 

(3) media.playO: 功能 是 开始 或 恢复 播放 一 个 音频 文件 ， 其 原型 如 下 。 

media.play(); 

方法 media.play0 是 一 个 用 于 开始 或 恢复 播放 音频 文件 的 同步 函数 。 

(4) media.pause(): 功能 是 暂停 播放 一 个 音频 文件 ， 其 原型 如 下 。 

media.pause(); 

方法 media.pause(0 是 一 个 用 于 暂停 播放 音频 文件 的 同步 函数 。 

(5) media.release(): 功能 是 释放 底层 操作 系统 音频 资源 ， 其 原型 如 下 。 

media.release(); 

方法 media.releaseO 是 一 个 用 于 释放 系统 音频 资源 的 同步 函数 。 该 函数 对 于 Android 系统 尤为 重要 ， 
因为 Android 系统 的 OpenCore (多 媒体 核心 ) 的 实例 是 有 限 的 ， 开 发 者 可 以 在 不 再 需要 相应 Media Vt 
源 时 调用 release0 函 数 进 行 释 放 。 

(6) media.startRecord(): 功能 是 开始 录制 一 个 音频 文件 ， 其 原型 如 下 。 

media.startRecord(); 

方法 media.startRecordO 是 用 于 开始 录制 一 个 音频 文件 的 同步 函数 。 

C7) media.stop0: 功能 是 停止 播放 一 个 音频 文件 ， 其 原型 如 下 。 

media.stop(); 

方法 media.stop0 是 一 个 用 于 停止 播放 音频 文件 的 同步 函数 。 

(8) media.stopRecord(): 功能 是 停止 录制 一 个 音频 文件 ， 其 原型 如 下 。 


media.stopRecord(); 
方法 media.stopRecord(O 是 用 于 停止 录制 一 个 音频 文件 的 同步 函数 。 
2. 使 用 Media 


下 面 通 过 一 个 简单 的 例子 来 阐述 使 用 media.play 的 方法 。 


区 实例 23-10: 阐述 使 用 media play 的 方法 
源码 路 径 : 光盘 :\codes\23\23-10.html 


本 实例 的 实现 文件 是 23-10.html， 具 体 实现 代码 如 下 。 
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<IDOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>index.html</title> 
«script type="text/javascript" charset-"utf-8" src-"cordova.js" ></script> 
«script type-"text/javascript" charset-"utf-8" 
/等 待 加 载 PhoneGap 
document.addEventListener("deviceready", onDeviceReady, false); 


/PhoneGap 加 载 完毕 

function onDeviceReady(){ 
playAudio("http;//audio.ibeat.org/content/p1rj1s/p1rjfs - rockGuitar.mp3"); 

) 


/音频 播放 器 
var my media = null; 
var mediaTimer - null; 


/播放 音频 文件 
function playAudio(src) ( 
// 从 目标 文件 创建 Media 对 象 
my media = new Media(src, onSuccess, onError); 


/播放 音频 
my_media.play(); 


// 每 秒 更 新 一 次 媒体 播放 到 的 位 置 
if (mediaTimer == null) ( 
mediaTimer = setInterval(function() ( 
// 获 取 媒 体 播 放 到 的 位 置 
my_media.getCurrentPosition( 
// 获 取 成 功 后 调用 的 回调 函数 
function(position) { 
if (position > -1) { 
setAudioPosition((position/1000) + " sec"); 
: 5 
// 发 生 错误 后 调用 的 回调 函数 
function(e) { 


console.log("Error getting pos-" + e); 
setAudioPosition("Error: " + e); 


), 1000); 


// 暂 停 音频 播放 
function pauseAudio() ( 
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if (my media) { 
my  media.pause(); 
) 
j 


/停止 音频 播放 
function stopAudio() ( 
if (my media) ( 
my media.stop(); 
) 
Clearinterval(mediaTimer); 
mediaTimer - null; 


} 


// 创 建 Media 对 象 成 功 后 调用 的 回调 函数 
function onSuccess() ( 

console.log("playAudio():Audio Success"); 
) 


// 创 建 Media 对 象 出 错 后 调用 的 回调 函数 
function onError(error) ( 
alertcode:' +errorcode +'n'+ 
"message: ' + error.message + '\n'); 


) 


/设置 音频 播放 位 置 
function setAudioPosition(position) ( 
document.getElementByld('audio position').innerHTML = position; 
) 


</script> 
</head> 
<body> 
«a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar. 
mp3');">Play Audio</a> 
«a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a> 
«a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a> 
<p id="audio_position"></p> 
</body> 
</html> 


执行 后 的 效果 如 图 23-20 所 示 ， 执 行 后 将 播放 指定 的 MP3 文件 。 单 击 某 个 链接 后 ， 会 播放 或 暂停 
指定 的 MP3 文件 。 


Play Audio Pause Playing Audio Stop Playing Audio 
0.0040750000000000005 sec 


图 23-20 执行 效果 
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经 过 本 书 前 面 内 容 的 学 习 ， 已 经 掌握 了 HTML 5. jQuery Mobile 和 PhoneGap 的 基本 知识 。 本 章 将 
综合 运用 本 书 前 面 所 学 的 知识 ， 并 结合 使 用 CSS 和 JavaScript 的 技术 ， 开 发 一 个 在 Android 平台 运行 
的 电话 本 管理 系统 。 希 望 读 者 认真 阅读 本 章 内 容 ， 仔 细 品 味 HTML 5+jQuery Mobile+PhoneGap 组 合 在 
移动 Web 开发 领域 的 真 详 。 

92 知识 点 讲解 : 光盘 \ 视 频 讲解 \ 第 24 章 \ 开 发 一 个 电话 本 管理 系统 .avi 


24.1 需求 分 析 


本 实例 使 用 HTML 5+jQuery Mobile+PhoneGap 实现 了 一 个 经 典 的 电话 本 管理 工具 ， 能 够 实现 对 设 
备 内 联系 人 信息 的 管理 ， 包 括 添 加 新 信息 、 删 除 信息 、 快 速 搜索 信息 、 修 改 信息 、 更 新 信息 等 功能 。 
本 节 将 对 本 项 目 进行 必要 的 需求 性 分 析 。 


24.1.1 产生 背景 


随 着 网 络 与 信息 技术 的 发 展 ， 很 多 陌生 人 之 间 都 有 了 或 多 或 少 的 联系 。 如 何 更 好 地 管理 这 些 信息 
是 每 个 人 必须 面临 的 问题 ， 特 别 是 那些 很 久 没有 联系 的 朋友 ， 再 次 见面 无 法 马上 想起 关于 这 个 人 的 记 
忆 ， 会 造成 一 些 不 必要 的 尴 论 。 基 于 上 述 种 种 原因 ， 开 发 一 套 通讯 录 管 理 系统 很 重要 。 

另外 ， 随 着 移动 设备 平台 的 发 展 ， 以 Android 为 代表 的 智能 手机 系统 已 经 普及 到 普通 消费 者 用 户 。 
智能 手机 设备 已 经 成 为 人 们 生活 中 必 不 可 少 的 物品 。 在 这 种 历史 背景 之 下 ， 手 机 通讯 录 变 得 愈 发 重要 ， 
已 经 成 为 人 们 离 不 开 的 联系 人 系统 。 

正 是 因为 上 述 两 个 背景 ， 可 以 得 出 一 个 结论 : 开发 一 个 手机 电话 本 管理 系统 势 在 必 行 。 本 系统 的 
主要 目的 是 为 了 更 好 地 管理 每 个 人 的 通讯 录 ， 给 每 个 人 提供 一 个 井然 有 序 的 管理 平台 ， 防 止 手工 管理 
混乱 而 造成 不 必要 的 麻烦 。 


24.1.2 ”功能 分 析 


通过 市 场 调查 可 知 ， 一 个 完整 的 电话 本 管理 系统 应 该 包括 添加 模块 、 主 窗 体 模块 、 信 息 查询 模块 、 
信息 修改 模块 、 系 统管 理 模块 。 本 系统 主要 实现 设备 内 联系 人 信息 的 管理 ， 包 括 添加 、 修 改 、 查 询 和 
删除 。 整 个 系统 模块 划分 如 图 24-1 所 示 。 

COD 系统 主 界面 : 在 系统 主屏 幕 界 面 中 显示 了 两 个 操作 按钮 ， 通 过 这 两 个 按钮 可 以 快速 进入 本 系 
统 的 核心 功能 。 

Rp 查询: 单 击 此 按钮 后 能 够 来 到 系统 搜索 界面 ， 能 够 快速 搜索 设备 内 我 们 需要 的 联系 人 信息 。 

回 管理: 单 击 此 按钮 后 能 够 来 到 系统 管理 模块 的 主 界面 。 


sus PORTER 


m 系统 主 界面 


六 信息 添加 模块 


电话 本 管 


理 系统 


[一 一 一 一 一 一 | 信息 修改 模块 


c 信息 查询 模块 


信息 删除 模块 


24-1 系统 构成 模块 图 


QD 系统 管理 模块 :用 户 通过 此 模块 来 管理 设备 内 的 联系 人 信息 ， 在 屏幕 下 方 提供 了 实现 系统 管 
理 的 5 个 按钮 。 

加 ”搜索 ， 单 击 此 按钮 后 能 够 快速 搜索 设备 内 我 们 需要 的 联系 人 信息 。 

Rp dn. 单 击 此 按钮 后 能 够 向 设备 内 添加 新 的 联系 人 信息 。 

回 ”修改 : 单 击 此 按钮 后 能 够 修改 设备 内 已 经 存在 的 某 条 联系 人 信息 。 

RD 删除: 单 击 此 按钮 后 能 够 删除 设备 内 已 经 存在 的 某 条 联系 人 信息 。 

回 ”更 新 : 单 击 此 按钮 后 能 够 更 新 设备 的 所 有 联系 人 信息 。 

G) 信息 添加 模块 : 通过 此 模块 能 够 向 设备 中 添加 新 的 联系 人 信息 。 

(4) 信息 修改 模块 : 通过 此 模块 能 够 修改 设备 内 已 经 存在 的 联系 人 信息 。 

(5) 信息 查询 模块 : 通过 此 模块 能 够 搜索 设备 内 我 们 需要 的 联系 人 信息 。 

C6) 信息 删除 模块 : 通过 此 模块 能 够 删除 设备 内 已 经 存在 的 联系 人 信息 。 


24.22 创建 Android 工程 


(1) 启动 Eclipse， 依 次 选择 File? New— Other 命令 ， 然 后 在 向 导 的 树 形 结构 中 找到 Android 节点 。 
单 击 Android Project， 在 项 目 名 称 中 输入 Phonebook. 

(2) 单 击 Next 按钮 ， 选 择 目标 SDK， 在 此 选择 4.3。 单 击 Next 按钮 ， 在 其 中 填写 包 名 com. 
example.web dhb， 如 图 24-2 所 示 。 

G) 单 击 Next 按钮 ， 此 时 将 成 功 构建 一 个 标准 的 Android 项 目 。 如 图 24-3 所 示 为 当前 项 目的 目 
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IE Package Explorer 23 B 
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EES phonebook 
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Target SIKLOÇAPI 17: Android 4.2 Gelly Bean) 


Froject Ne 


回 Androidllani fest. xal 
W ic launcher-web. png. 
[ proguard-project. txt 
B project. properties 


Compile With: OAPI 18: Android 4.3 
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图 24-2 创建 Android 工程 24-3 ”创建 的 Android 工程 
(4) 修改 文件 MainActivity.java， 为 此 文件 添加 执行 HTML 文件 的 代码 ， 主 要 代码 如 下 。 


public class MainActivity extends DroidGap { 
(Override 
public void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedlnstanceState); 
super.loadUri("file:///android asset/www/main.html"); 


243 ”实现 系统 主 界面 


在 本 实例 中 ， 系 统 主 界面 的 实现 文件 是 main.html， 主 要 实现 代码 如 下 。 


«script src-" /js/jquery.js"» «/script» 
«script src-" /js/jquery.mobile-1.2.0.js"» «/script» 
«script srcz" /cordova-2.1.0.js"» «/script» 


</head> 
<body> 
<l-- Home --> 
«div data-role="page" id="page1" style="background-image: url(./img/bg.gif);" > 
<div data-theme="e" data-role="header"> 
<h2> 电 话 本 管理 中 心 </h2> 
</div> 
«div data-role="content" style="padding-top:200px;"> 
«a data-role-"button" data-theme-"e" hrefz" /select.html" id="chaxun" data-icon-"search" 
data-iconpos- "left" data-transition="flip"> 查 询 </a> 
«a data-role-"button" data-theme-"e" hrefz" /set.html" id="guanli" data-icon-"gear" data- 
iconpos="left"> 管理 </a> 
</div> 
«div data-theme="e" data-role-"footer" data-position="fixed"> 
«span class="uirtitle"> 免 费 组 织 制 作 v1.0</span> 
</div> 
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«script type-"text/javascript" 
lIApp custom javascript 
sessionStorage.setltem("uid",""); 


S(*tpage1").bind('pageshow'function()( 
$.mobile.page.prototype.options.domCache - false; 


H: 
/等 待 加 载 PhoneGap 
document.addEventListener("deviceready", onDeviceReady, false); 


/PhoneGap 加 载 完毕 

function onDeviceReady() ( 
var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
db.transaction(populateDB, errorCB); 


) 
/填充 数据 库 
function populateDB(tx){ 
tx.executeSql('CREATE TABLE IF NOT EXISTS "myuser ('user id integer primary 
key autoincrement ,'user name" VARCHAR( 25 ) NOT NULL ,'user phone' varchar( 15 ) NOT NULL ,'user qq' 
varchar( 15 ) user email' VARCHAR( 50 ), user bz TEXT)); 


} 
/事务 执行 出 错 后 调用 的 回调 函数 
function errorCB(tx, err) ( 

alert("Error processing SQL: "*err); 


} 


</script> 
</div> 
</body> 
</html> 


执行 后 的 效果 如 图 24-4 所 示 。 


图 24-4 执行 效果 


T Android D RUSTER HERE 


244 实现 信息 查询 模块 
信息 查询 模块 的 功能 是 快速 搜索 设备 内 我 们 需要 的 联系 人 信息 。 单 击 图 24-4 中 的 “查询 ”按钮 后 
会 来 到 查询 界面 ， 如 图 24-5 所 示 。 
姓名 电话 
aaa 
在 查询 界 
信息 查询 模块 的 


拨号 
130000000005 1 


图 24-5 查询 界面 
上 的 表单 中 可 以 输入 搜索 关键 字 ， 然 后 单 击 “ 查 询 ” 按 钮 ， 会 在 下 方 显示 搜索 结果 。 
实现 文件 是 selecthtml， 主 要 实现 代码 如 下 。 
«script src-" /js/jquery.js"» «/script» 
</head> 
<body> 


«script src="./js/jquery.mobile-1.2.0.js"></script> 
<body> 


<l-- «script src="./cordova-2.1.0.js"></script> 一 > 
<l-- Home --> 


<div data-role="page" id="page1"> 
left"> 返 回 </a> 


<div data-theme="e" data-role="header"> 
right"> 首 页 </a> 


«a data-role-"button" href="./main.html" data-icon-"back" data-iconpos-"left" class-"ui-btn- 
«h3» 查询 </h3> 

<div > 

</fieldset> 

</div> 


«a data-role-"button" href="./main.html" data-icon-"home" data-iconpos="right" class-"ui-btn- 
«fieldset data-role-"controlgroup" data-mini-"true"» 
<div> 


<input name=" id="searchinput6" placeholder= "输入 联系 人 姓名 " value=" type="search" /> 
«input type="submit" id-"search" 
value-" ij" data-mini-"true" /> 
</div> 
</div> 
<div data-role="content"> 


</div> 


«div class-"ui-grid-b" id="contents" > 
</div> 


data-theme-"e" data-icon-"search" data-iconpos-"left" 
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<script> 
l/App custom javascript 
var u_name=""; 
<l- 查询 全 部 联系 人 一 > 
I| 等 待 加 载 PhoneGap 
document.addEventListener("deviceready", onDeviceReady, false); 
|| PhoneGap 加 载 完毕 
function onDeviceReady() ( 
var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
db.transaction(queryDB, errorCB); /调用 queryDB 查询 方法 ， 以 及 errorCB 错误 回调 方法 


} 
/| 查询 数据 库 
function queryDB(tx) { 
tx.executeSqi( SELECT * FROM myuser, [], querySuccess, errorCB); 


) 
/查询 成 功 后 调用 的 回调 函数 
function querySuccess(tx, results) ( 
var len = results.rows.length; 
var str="<div class-'ui-block-a' style="width:90px;'> 姓 名 </div><div class='ui-block-b'> 电 话 
</div><div class-'ui-block-c'»32 & «/div»"; 
console.log("myuser table: " + len + " rows found."); 
for (var i-0; i«len; i++){ 
// 写 入 到 logcat 文件 
Str +="<div class-'ui-block-a' style='width:90px;'>"+results.rows.item(i).user_name+ 
"</div><div class='ui-block-b'>"+results.rows.item(i).user_phone +"</div><div class='ui-block-c'><a href='tel:"+ 
results.rows.item(i).user_phone+"  data-role-'button' class='ui-btn-right > 拨打 </a></div>"; 
} 
S$("#contents").html(str); 


} 
// 事 务 执行 出 错 后 调用 的 回调 函数 
function errorCB(err) { 
console.log("Error processing SQL: "+err.code); 


} 
<l- 查询 一 条 数据 -> 
S$("#search").click(function(X{ 
var searchinpute = $("#searchinput6").val(); 
u name = searchinput6; 
var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
db.transaction(queryDBbyone, errorCB); 
y 
function queryDBbyone(tx)( 
txexecuteSql"SELECT * FROM myuser where user name like '?6"*u name-"96", [], 
querySuccess, errorCB); 
) 
</script> 
</div> 
</body> 
</html> 


507 


[Android SD mw se 


245 ”实现 系统 管理 模块 


系统 管理 模块 的 功能 是 管理 设备 内 的 联系 人 信息 ， 单 击 图 24-4 中 
的 “管理 ”按钮 后 来 到 系统 管理 界面 ， 如 图 24-6 所 示 。 
在 图 24-6 所 示 的 界面 中 提供 了 实现 系统 管理 的 5 个 按钮 , 具 
体 说 明 如 下 。 
E] ”搜索 : 单 击 此 按钮 后 能 够 快速 搜索 设备 内 我 们 需要 的 联 
系 人 信息 。 编号 姓名 电话 
RI 添加: 单 击 此 按钮 后 能 够 向 设备 内 添加 新 的 联系 人 信息 。 8000000000 
回 ”修改 : 单 击 此 按钮 后 能 够 修改 设备 内 已 经 存在 的 某 条 联 图 24-6 系统 管理 界面 
系 人 信息 。 
回 删除 : 单 击 此 按钮 后 删除 设备 内 已 经 存在 的 某 条 联系 人 信息 。 
Ep 更 新 : 单 击 此 按钮 后 能 够 更 新 设备 的 所 有 联系 人 信息 。 
系统 管理 模块 的 实现 文件 是 sethtml， 主 要 实现 代码 如 下 。 


<body> 
«I—- Home --> 
«div data-role-"page" id="set 1" data-dom-cache-"false" 
<div data-theme-"e" data-role-"header" > 
«a data-role-"button" href-"main.html" data-icon-"home" data-iconpos-"right" class-"ui-btn- 
right» 主页 </a> 
<h1> 管 理 </h1> 
«a data-role-"button" href-"main.html" data-icon-"back" data-iconpos-"left" class="ui-btn- 
left> 后 退 </a> 
<div > 
«span id="test"></span> 
<fieldset data-role-"controlgroup" data-mini="true"> 
«input name=" id="searchinput1"”placeholder=" 输 入 查询 人 的 姓名 "value=" type= 


"search" /> 


«input type="submit" id-"search" data-inline-"true" data-icon-"search" data-iconpos- 
"top" value=" 搜 索 " /> 
«input type="submit" id-"add" data-inline-"true" data-icon-"plus" data-iconpos-"top" 


value=" 添 加 "/> 
«input type="submit" id="modfiry"data-inline="true" data-icon-"minus" data-iconpos-"top" 
value=" 修 改 " /> 
«input type="submit" id-"delete" data-inline-"true" data-icon-"delete" data-iconpos-"top" 
value=" 删 除 " /> 
«input type="submit" id="refresh" data-inline-"true" data-icon-"refresh" data-iconpos-"top" 
value=" 更 新 " /> 
</div> 
</div> 
<div data-role="content"> 


e. 
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«div class-"ui-grid-b" id="contents"> 
<ldiv > 
</div> 
«script type="text/javascript"> 


$.mobile.page.prototype.options.domCache = false; 
var u_name=""; 
var num": 


var strsql="™"; 
<l- 查询 全 部 联系 人 一 > 
/等 待 加 载 PhoneGap 
document.addEventListener("deviceready", onDeviceReady, false); 
/WPhoneGap 加 载 完毕 
function onDeviceReady(){ 
var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
db.transaction(queryDB, errorCB); /调用 queryDB 查询 方法 ， 以 及 errorCB 错误 回调 方法 


) 
/查询 数据 库 
function queryDB(tx) ( 
tx.executeSqi( SELECT * FROM myuser, [], querySuccess, errorCB); 


} 
// 查 询 成 功 后 调用 的 回调 函数 
function querySuccess(tx, results) { 
var len = results.rows.length; 
var str-"«div class-'ui-block-a'^ 4& 5 </div><div class-'ui-block-b'» 3*4 </div><div class= 
"ui-block-c'» Ri i& </div>"; 
lIconsole.log("myuser table: " + len + " rows found."); 
for (var i70; i<len; i--)( 
// 写 入 到 logcat 文件 
liconsole.log("Row = " + i +" ID = " + results.rows.item(i).user id +" Data = "+ 
results.rows.item(i).user name); 
str *-"«div class-"'ui-block-a'» «input type-'checkbox' class-'idvalue' value="+results. 
rows.item(i).user id" /></div><div class-'ui-block-b'»"*results.rows.item(i).user name 
*"«|div» «div class-'ui-block-c'»"*results.rows.item(i).user phone-"«/div-"; 


} 
S$("#contents").html(str); 
ji 
// 事 务 执行 出 错 后 调用 的 回调 函数 
function errorCB(err) { 
console.log("Error processing SQL: "+err.code); 
} 
<!-- 查询 一 条 数据 -> 
S$("#search").click(function(X{ 


var searchinput1 = $("#searchinput1").val(); 
u name = searchinput1; 
var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
db.transaction(queryDBbyone, errorCB); 
D: 
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function queryDBbyone(tx)t 
txexecuteSql"SELECT * FROM myuser where user name like '?6"*u name-"96", [], 
querySuccess, errorCB); 
H 
$("#delete").click(function(X{ 
var len = $("input:checked").length; 
for(var i=0;i<len;i++)f 
num --","4$("input:checked"J[i]. value; 
) 
num-num.substr(1); 
var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
db.transaction(deleteDBbyid, errorCB); 
HR 
function deleteDBbyid(tx)( 
txexecuteSqi("DELETE FROM 'myuser WHERE user id in("+num+")", [], queryDB, 
errorCB); 


S$("add").click(function()( 
$.mobile.changePage ('add.html', fade", false, false); 
D: 
S$("#modfiry").click(function(X{ 
if($("input:checked").length==1X{ 
var userid=$("input:checked").val(); 
sessionStorage.setltem("uid",userid); 
$.mobile.changePage (modfiry.html', 'fade', false, false); 
Jelset 
alert(" 请 选择 要 修改 的 联系 人 ， 并 且 每 次 只 能 选择 一 位 "); 


D 


//============= 


$("#refresh").click(function(){ 
/从 全 部 联系 人 中 进行 搜索 

var options = new ContactFindOptions(); 

options.filter-"": 

var filter = ['displayName","phoneNumbers"T; 

options.multiple-true; 

navigator.contacts.find(filter, onTbSuccess, onError, options); 

X: 

llonSuccess: 返回 当前 联系 人 结果 集 的 快照 
function onTbSuccess(contacts){ 

/显示 所 有 联系 人 的 地 址 信息 


var str="<div class='ui-block-a> 编 号 </div><div class='ui-block-b'> 姓 名 </div><div class= 
"ui-block-c'» FBi& </div>"; 
var phone; 
var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
for (var i-0; i«contacts.length; i---)( 
for(var j=0; j< contacts[i].phoneNumbers.length; j---)( 
phone = contacts[i].phoneNumbers[j].value; 


) 
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strsql +="INSERT INTO 'myuser (‘user_name', 'user phone") VALUES ("+contacts[i]. 
displayName+","+phone+");#"; 


} 
db.transaction(addBD, errorCB); 


} 
// 更 新 插入 数据 
function addBD(tx)( 


strs-strsql.split(*££"); 
for(var i-O;i«strs.length;i---)( 
tx.executeSql(strs[i], [], [], errorCB); 


} 
var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
db.transaction(queryDB, errorCB); 


) 
llonError: 获取 联系 人 结果 集 失败 
function onError(){ 
console.log("Error processing SQL: "*err.code); 
H 
</script> 
</div> 
</body> 


24.6 ”实现 信息 添加 模块 


在 图 24-6 所 示 的 界面 中 提供 了 实现 系统 管理 的 5 个 按钮 ， 如 果 单 击 “ 添 加 ”按钮 ， 则 会 来 到 信息 
添加 界面 ， 通 过 此 界面 可 以 向 设备 中 添加 新 的 联系 人 信息 ， 如 图 24-7 所 示 。 


图 24-7 信息 添加 界面 
信息 添加 模块 的 实现 文件 是 add.html， 主 要 实现 代码 如 下 。 


<body> 
<l- Home --> 
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«div data-role-"page" id="page1"> 
<div data-theme-"e" data-role-"header"- 
«a data-role-"button" id="tjlxr" data-theme-"e" data-icon-"info" data-iconpos-"right" class-"ui- 
btn-right"> 保 存 </a> 
<h3> 添 加 联系 人 </h3> 
«a data-role-"button" id-"czlxr" data-theme="e” data-icon="refresh" data-iconpos-"left" class= 
"ui-btn-left"> 重 置 </a> 
</div> 
<div data-role="content"> 
<form action-"" data-theme-"e" > 
<div data-role="fieldcontain"> 
<fieldset data-role-"controlgroup" data-mini="true"> 
«label for="textinput1"> 姓 名 : «input name-"" id="textinput1" placeholder=" 联 系 人 
姓名 " value=" type="text" /></label> 
</fieldset> 
<fieldset data-role-"controlgroup" data-mini="true"> 
«label for="textinput2"> 电 话 : «input name=" id="textinput2" placeholder=" 联 系 人 
电话 " valuez"" type-"tel" /></label> 
</fieldset> 
<fieldset data-role-"controlgroup" data-mini="true"> 
<label for="textinput3">QQ: «input name="" id="textinput3" placeholder="" value= 
™type="number" /></label> 
</fieldset> 
<fieldset data-role-"controlgroup" data-mini="true"> 
<label for="textinput4">Email : «input name="” id-"textinput4" placeholder-"" 
value="" type-"email" /></label> 
</fieldset> 
<fieldset data-role="controlgroup"> 
<label for="textarea1"> 备注 : </label> 
<textarea name="" id="textarea1" placeholder="" data-mini="true"></textarea> 
</fieldset> 
</div> 
<div> 
«a data-role-"button" id-"back" data-theme="e" > 返回 </a> 
</div> 
</form> 
</div> 
«script type="text/javascript"> 
$.mobile.page.prototype.options.domCache = false; 
var textinput1 = ""; 


var textarea1 B 
$("#tjixr").click(function(}{ 


textinput1 = $("#textinput1").val(); 
textinput2= $("#textinput2").val(); 
textinput3 = $("#textinput3").val(); 
textinput4 = $("#textinput4").val(); 
textarea? = $("#textarea1").val(); 
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var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
db.transaction(addBD, errorCB); 
pn 
function addBD(tx)( 
txexecuteSqI("INSERT INTO 'myuser ('user name', 'user phone', 'user qq, 'user email', "user bz) 
VALUES ("+textinput1+","+textinput2+","+textinput3+","+textinput4+","+textarea1+")", [], successCB, errorCB); 
) 
S("stczixr").click(function()t 
S("sttextinput1").val(""); 
S("sttextinput2").val(""); 
S$("sttextinput3").val(""); 
S$("sttextinput4").val(""); 
S$("itextarea1").val(""); 
» 
S$("iiback").click(function()( 
SuccessCB(); 


H; 

/等 待 加 载 PhoneGap 

document.addEventListener("deviceready", onDeviceReady, false); 

I| PhoneGap 加 载 完毕 

function onDeviceReady(){ 
var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
db.transaction(populateDB, errorCB); 


) 
/填充 数据 库 
function populateDB(tx) ( 

IItx.executeSql( DROP TABLE IF EXISTS 'myuser"); 

tx.executeSq('CREATE TABLE IF NOT EXISTS 'myuser' ('user id' integer primary key 
autoincrement , 'user name' VARCHAR( 25 ) NOT NULL , 'user phone' varchar( 15 ) NOT NULL , 'user qq' 
varchar( 15 ) , 'user email' VARCHAR( 50 ), 'user. bz' TEXT)); 

IItx.executeSqi("INSERT INTO 'myuser' ('user name', 'user phone', 'user qq', 'user email', 
"user bz') VALUES ('xij', 12222222, 222 'nlliiiull" null")"); 

IItx.executeSqi("INSERT INTO 'myuser' ('user name', 'user phone', 'user qq', 'user email', 
"user bz') VALUES ('sKLl',12222222.222,"nlllliull' 'null')"); 

IItx.executeSqi("INSERT INTO 'myuser' ('user name', 'user phone', 'user qq', 'user email', 
"user bz') VALUES (EP, 12222222.222,"nlllllull'"null')"); 

IItx.executeSql("INSERT INTO 'myuser' ('user name', 'user phone', 'user qq', 'user email', 
"user bz') VALUES (Mi s:', 12222222. 222,"nlililull'null')"); 

/tx.executeSql(INSERT INTO DEMO (id, data) VALUES (2, "Second row"); 


) 
/事务 执行 出 错 后 调用 的 回调 函数 
function errorCB(tx, err) ( 

alert("Error processing SQL: "+err); 


) 


/事务 执行 成 功 后 调用 的 回调 函数 
function successCB() ( 
$.mobile.changePage ('set.html', fade', false, false); 
T 
</script> 
</div> 
</body> 
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24.7 ”实现 信息 修改 模块 


在 图 24-6 所 示 的 界面 中 ， 如 果 先 选中 一 个 联系 人 的 信息 ， 然 后 单 击 “ 修 改 ” 按 钮 ， 会 来 到 信息 修 
改 界 面 ， 通 过 此 界面 可 以 修改 被 选中 的 联系 人 信息 ， 如 图 24-8 所 示 。 


| 13000000000 
Qa: 

[nin 
Emai 

| 11111@qq.com 
&i: 

f= 


图 24-8 信息 修改 界面 
信息 修改 模块 的 实现 文件 是 modify.html， 主 要 实现 代码 如 下 。 


«script type-"text/javascript" src="./js/jquery .js"></script> 
</head> 
<body> 
<l-- Home --> 
«div data-role-"page" id="page1"> 
<div data-theme-"e" data-role-"header"» 
«a data-role-"button" id="tjixr" data-theme-"e" data-icon-"info" data-iconpos-"right" class-"ui- 
btn-right"> 修 改 </a> 
<h3> 修 改 联系 人 </h3> 
«a data-role="button” id="back" data-theme-"e"  data-icon-"refresh" data-iconpos-"left" class= 
"uirbtn-left"> 返回 </a> 
</div> 
«div data-role="content"> 
<form action-"" data-theme-"e" > 
<div data-role="fieldcontain"> 
<fieldset data-role-"controlgroup" data-mini="true"> 
<label for="textinput1"> 姓 名 : «input name-"" id="textinput1" placeholder=" 联 系 人 
姓名 " value=" type="text" /></label> 
</fieldset> 
<fieldset data-role-"controlgroup" data-mini="true"> 
<label for="textinput2"> 电 话 : «input name="" id="textinput2" placeholder=" 联 系 人 
电话 " value" type-"tel" /></label> 
</fieldset> 
<fieldset data-role-"controlgroup" data-mini= "true"> 
<label for="textinput3">QQ : <input name="” id-"textinput3à" placeholder-"" 
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value=" type="number /></label> 
</fieldset> 
<fieldset data-role-"controlgroup" data-mini="true"> 
«label for="textinput4">Emai : «input name-"" id-"textinput4" placeholder-' 
value=" type-"email" /></label> 
</fieldset> 
<fieldset data-role="controlgroup"> 
<label for="textarea1"> 备注 : </label> 
<textarea name="" id="textarea1" placeholder="" data-mini="true"></textarea> 
</fieldset> 
</div> 
</form> 
</div> 
«script type="text/javascript"> 
$.mobile.page.prototype.options.domCache = false; 
var textinput1 = ""; 
var textinput2 = ""; 
var textinput3 = ""; 
var textinput4 = ""; 
var textarea] ="; 
var uid 7 sessionStorage.getltem("uid"); 


$("#tjixr").click(function(}{ 


textinput = $("#textinput1").val(); 
textinput2 = $("#textinput2").val(); 
textinput3 = $("#textinput3").val(); 
textinput4= $("#textinput4").val(); 
textarea? =  $("#extarea1").val(); 
var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
db.transaction(modfiyBD, errorCB); 
» 
function modfiyBD(tx) 
l| alet("UPDATE 'myuserSET  'user name'-"«textinput1-", 'user phone'-"«textinput2-" user - 
qq'="+textinput3 
Il *"'user email="+textinput4+", 'user bz'-"-textarea1*" WHERE userid-"*uid); 
tx.executeSql("UPDATE 'myuser'SET 'user name'2"textinput1-", 'user phone'-"«textinput2-*", 
"user qq'-"4textinput3 
*"'user email'-"-textinput4-", 'user bz'-"-textarea1*" WHERE user. id-"*uid, 


[], successCB, errorCB); 


S("fback").click(function( 
successCB(); 
» 
document.addEventL istener("deviceready", onDeviceReady, false); 
/PhoneGap 加 载 完毕 
function onDeviceReady(){ 
var db = window.openDatabase("Database", "1.0", "PhoneGap myuser", 200000); 
db.transaction(selectDB, errorCB); 


) 
function selectDB(tx) { 
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/lalert("SELECT * FROM myuser where user id-"*uid); 
tx.executeSqi(" SELECT * FROM myuser where user id-"-uid, [], querySuccess, errorCB); 


T 
/事务 执行 出 错 后 调用 的 回调 函数 
function errorCB(tx, err) ( 

alert("Error processing SQL: "+err); 


H 
/事务 执行 成 功 后 调用 的 回调 函数 
function successCB(){ 
$.mobile.changePage ('set.html', fade', false, false); 
} 
function querySuccess(tx, results) { 
var len = results.rows.length; 
for (var i70; i«len; i++){ 
// 写 入 到 logcat 文件 
liconsole.log("Row = " + i + " ID =" + results.rows.item(i).user id +" Data = "+ results. 
rows.item(i).user name); 
S$("étextinput1").val(results.rows.item(i).user name); 
S$("étextinput2").val(results.rows.item(i).user phone); 
S$("&textinput3").val(results.rows.item(i).user qq); 
S$("&textinput4").val(results.rows.item(i).user email); 
S$("étextarea1").val(results.rows.item(i).user bz); 


24.8 ”实现 信息 删除 模块 和 更 新 模块 


在 图 24-6 所 示 的 界面 中 ， 如 果 先 选中 一 个 联系 人 的 信息 ， 然 后 单 击 “ 删 除 ” 按 钮 ， 会 删除 选中 的 
联系 人 信息 。 信 息 删 除 模块 的 功能 在 文件 sethtml 中 实现 ， 相 关 的 实现 代码 如 下 。 


function deleteDBbyid(tx)( 
tx.executeSql("DELETE FROM 'myuser' WHERE user id in("+num+")", [], queryDB, errorCB); 


) 


在 图 24-6 所 示 的 界面 中 ， 如 果 单 击 “ 更 新 ”按钮 ， 则 会 更 新 整个 设备 内 的 联系 人 信息 。 信 息 更 新 
模块 的 功能 在 文件 set.html 中 实现 ， 相 关 的 实现 代码 如 下 。 


$("#refresh").click(function(X{ 
/从 全 部 联系 人 中 进行 搜索 
var options = new ContactFindOptions(); 
options .filterz"": 
var filter = ['displayName","phoneNumbers"]; 
options.multiple-true; 
navigator.contacts.find(filter, onTbSuccess, onError, options); 


» 
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